1 # 一、四个map方法的使用
2 # 1.mapState方法：用于帮助我们映射state中的数据为计算属性
3 computed:{
4 // sum(){
5 // return this.$store.state.sum;
6 // },
7 // 借助mapState生成计算数据 对象写法
8 …mapState({sum: 'sum'}), // 代替上面的sum()
9 // 借助mapState生成计算数据 数组写法
10 …mapState(['sum']), // 代替上面的sum()
11 },
12 # 2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性
13 computed:{
14 // bigSum(){
15 // return this.$store.getters.bigSum;
16 // },
17 // 借助mapState生成计算属性 对象写法
18 …mapGetters({bigSum: 'bigSum'}), // 代替上面的bigSum()
19 // 借助mapState生成计算属性 数组写法
20 …mapGetters(['bigSum']), // 代替上面的bigSum()
21 },
22 # 3.mapActions方法：用于帮助我们生成actions对话中的方法
23 methods:{
24 // invrementOdd(){
25 // this.$store.dispatch('jiaOdd', this.n);
26 // },
27 // invrementWait(){
28 // this.$store.dispatch('jiaWait', this.n);
29 // },
30 // 靠mapActions生成，代替 invrementOdd invrementWait函数 对象写法
31 …mapActions({invrementOdd: 'jiaOdd', invrementWait: 'jiaWait'})
32 // 靠mapActions生成，代替 invrementOdd invrementWait函数 数组写法
33 …mapActions(['jiaOdd', 'jiaWait'])
34 },
35 # 4.mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
36 methods:{
37 // invrement(){
38 // // console.log('@', this);
39 // this.$store.commit('JIA', this.n);
40 // },
41 // decrement(){
42 // this.$store.commit('JIAN', this.n);
43 // },
44 // 靠mapMutations生成，代替invrement decrement 对象形式
45 …mapMutations({invrement:'JIA', decrement: 'JIAN'}),
46 // 靠mapMutations生成，代替invrement decrement 数组简写
47 …mapMutations(['JIA', 'JIAN'])
48 },
49 # 5.备注：mapActions与Mutations使用时，若要传递参数，需要在模板中绑定事件时传递好参数，否则会默认传一个事件对象。
50
51
52 # 二、模块化+命名空间
53 # 1.目的：让代码更好维护，让更多种数据分类更加明确。
54 # 2.修改store.js
55 const countAbout = {
56 namespaced: true, // 开启命名空间
57 state:{x:1},
58 mutations:{…},
59 actions:{…},
60 getters:{
61 bigSum(state){
62 return state.sum * 10;
63 }
64 }
65 }
66 const personAbout = {
67 namespaced: true,
68 state:{…},
69 mutations: {…},
70 actions: {…}
71 }
72 const store = new Vuex.Store({
73 models:{
74 countAbout,
75 personAbout
76 }
77 })
78 # 3.开启命名空间后，组件中读取state数据：
79 方式一：自己直接读取
80 this.$stroe.state.personAbout.list
81 方式二：借助mapState读取
82 …mapState('countAbout',['sum', 'school','subject'])
83 # 4.开启命名空间后，组件中读取getters数据
84 # 方式一：自己直接读取
85 this.$store.getters['personAbout/firstPersonName']
86 # 方式二：借助mapGetters读取
87 …mapGetters('countAbout',[bigSum])
88 # 5.开启命名空间后，组件中调用dispatch
89 # 方式一：自己直接dispatch
90 this.$store.dispatch('personAbout/addPersonWang', person)
91 # 方式二：借助mapActions:
92 …mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
93 # 6.开启命名空间后，组件中调用commit
94 # 方式一：自己直接commit
95 this.$store.commit('personAbout/ADD_PERSON', person)
96 # 方式二：借助mapMutations
97 …mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})