vuex使用的简单例子

vuex的基本知识讲解

---

store.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store({ state: { lists: [{ id: 1, name: '你好，Vuex', money: 122 }] }, getters: { lists2: (state) => { var numArr = state.lists.map(num => { return { id: new Date(), name: "**" + num.name + "**", money: num.money / 2 } }) return numArr } }, mutations: { reducePriceM: (state, payload) => { state.lists.forEach(num => { num.money -= payload; }) } }, actions: { //payload是参数，可以是对象 reducePriceA: (context, payload) => { context.commit('reducePriceM', payload) } } })

调用方式如下： Test.vue

<template> <div> <div v-for="(item,index) in lists" :key="index">{{item.name}}&nbsp;{{item.money}} </div> <button @click="reducePriceA(4)">商品降价</button> </div> </template> <script> import {mapState,mapGetters,mapActions} from 'vuex' export default { computed: { ...mapState({ lists:state => state.lists }), ...mapGetters([ "lists2" ]) }, methods: { ...mapActions([ "reducePriceA" ]) } } </script> <style> </style>

---

如果没有写mapState，可以获取state中的属性值,

computed:{ lists() { console.log(this.$store) return this.$store.state.lists } }

---

如果在store.js中没有写mapGetters，我们可以使用如下方式获取getters：

computed:{ lists2() { return this.$store.getters.lists2; } }

---

如果没有在store.js中写mutations:

computed:{ lists2() { var numArr = this.$store.state.lists.map(num => { return { id: new Date(), name: "**"+num.name+"**", money: num.money / 2 } }) return numArr } }

---

没有写mapActions:可以使用如下：

methods：{ reducePriceX(amount) { /* this.$store.state.lists.forEach(num=>{ num.money-=1; }) */ this.$store.commit('reducePrice') this.$store.dispatch("reducePriceA", amount); //分发actions } }

注意： 对象展开运算符什么时候使用： mapState、mapGetters、mapActions