Veux mapState、mapGetters、mapActions、mapMutations && Vuex命名空间

 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'})