Vuex的使用方法mutation和action及getter的基本使用

mutations
在vue 中，只有mutation 才能改变state.  mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字，

先看上一篇文章的例子：

在没有用vuex的时候，我们可以实现点击颜色切换

用了vuex后，只实现了颜色变换一次的功能，那我们可不可以变换很多次呢？

mutations 登场 , 问题迎刃而解 :

store.js:

1.  
   import Vue from 'vue';
2.  
   import Vuex from 'vuex';
3.  
   Vue.use(Vuex);
4.  
   const state = {
5.  
       show:false
6.  
   }
7.  
   export default new Vuex.Store({
8.  
       state,
9.  
       mutations:{
10.  
            switch_color(state){
11.  
                state.show = state.show?false:true
12.  
            }
13.  
        }
14.  
    })
15.  
    父组件： 
16.  
     
17.  
    <template>
18.  
        <div>
19.  
           <a href="javascript:;" @click="$store.commit('switch_color')">点击</a>
20.  
            <children ></children>
21.  
        </div>
22.  
    </template>
23.  
    <script>
24.  
        import children from "@/components/children"
25.  
        export default {
26.  
            components: {
27.  
                children
28.  
            }
29.  
        }
30.  
    </script>

使用$store.commit('switch_color') 来触发 mutations 中的 switch_color 方法。

再举个例子
1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件

const state = { count:1 }

2、用export default 封装代码，让外部可以引用

export default new Vuex.Store({undefined

    state

  });

store.js:

1.  
   import Vue from 'vue';
2.  
   import Vuex from 'vuex';
3.  
   Vue.use(Vuex);
4.  
   const state = {
5.  
       count:1
6.  
   }
7.  
   export default new Vuex.Store({
8.  
       state,
9.  
       mutations:{
10.  
            add(state){
11.  
                state.count += 1;
12.  
            },
13.  
            reduce(state){
14.  
                state.count -= 1;
15.  
            }
16.  
        }
17.  
    })

新建一个vue的模板，位置在components文件夹下，名字叫page.vue。在模板中我们引入我们刚建的store.js文件，并在模板中用{undefined{$store.state.count}}输出count 的值。

1.  
   <template>
2.  
      <div>  
3.  
         <div>{{$store.state.count}}</div>
4.  
         <input type="button" @click="$store.commit('add')" value="+">
5.  
         <input type="button" @click="$store.commit('reduce')" value="-">
6.  
      </div>
7.  
   </template>
8.  
   <script>
9.  
   import store from '../store/store'
10.  
    export default {
11.  
        
12.  
    }
13.  
    </script>

这样进行预览就可以实现对vuex中的count进行加减了。

注意：mutations里的操作必须是同步的

      你一定好奇 , 如果在 mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要                 在 mutationss 里执行异步操作而已。

actions
action去commit mutations, 所以还要定义action. store.js 里面添加actions.

store.js:

1.  
   import Vue from 'vue';
2.  
   import Vuex from 'vuex';
3.  
   Vue.use(Vuex);
4.  
   const state = {
5.  
       show:false,
6.  
       count:1
7.  
   }
8.  
   export default new Vuex.Store({
9.  
       state,
10.  
        mutations:{
11.  
            switch_color(state){
12.  
                state.show = state.show?false:true
13.  
            },
14.  
            add(state){
15.  
                state.count += 1;
16.  
            },
17.  
            reduce(state){
18.  
                state.count -= 1;
19.  
             }
20.  
         },
21.  
         actions:{
22.  
             addPlus(context){
23.  
                 context.commit('add')
24.  
             },
25.  
             reducePlus(context){
26.  
                 context.commit('reduce');
27.  
             }
28.  
         }
29.  
    })

action 和mutions 的定义方法是类似的，我们要dispatch 一个action, 所以actions 肯定有一个名字，dispatch action 之后它要做事情，就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context,  它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性， context.commit 就会执行commit命令。

　　其实actions 还可以简写一下， 因为函数的参数是一个对象，函数中用的是对象中一个方法，我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions

   

1.  
   actions:{
2.  
            addPlus({commit}){
3.  
               commit('add')
4.  
            },
5.  
            reducePlus({commit}){
6.  
               commit('reduce');
7.  
            }
8.  
        }
9.  
   })

当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.

打开page.vue 组件，给两个按钮添加click 事件。

1.  
   <template>
2.  
      <div>  
3.  
         <div>{{$store.state.count}}</div>
4.  
         <input type="button" @click="$store.dispatch('addPlus')" value="+">
5.  
         <input type="button" @click="$store.dispatch('reducePlus')" value="-">
6.  
      </div>
7.  
   </template>
8.  
   <script>
9.  
   import store from '../store/store'
10.  
    export default {
11.  
        
12.  
    }
13.  
    </script>

context：上下文对象，这里你可以理解称store本身。
{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
官方推荐 , 将异步操作放在 action 中。

getter
有的组件中获取到 store 中的state,  需要对进行加工才能使用，computed 属性中就需要写操作函数，如果有多个组件中都需要进行这个操作，那么在各个组件中都写相同的函数，那就非常麻烦，这时可以把这个相同的操作写到store 中的getters,  每个组件只要引用getter 就可以了，非常方便。Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。

 store.js:

1.  
   export default new Vuex.Store({
2.  
       state,
3.  
       getters:{
4.  
           count:function(state){
5.  
              return state.count += 100;
6.  
           }
7.  
       },
8.  
       mutations:{
9.  
           switch_color(state){
10.  
                state.show = state.show?false:true
11.  
            },
12.  
            add(state){
13.  
                state.count += 1;
14.  
            },
15.  
            reduce(state){
16.  
                state.count -= 1;
17.  
             }
18.  
         },
19.  
         actions:{
20.  
             addPlus({commit}){
21.  
                commit('add')
22.  
             },
23.  
             reducePlus({commit}){
24.  
                commit('reduce');
25.  
             }
26.  
         }
27.  
    })

我们在组件中使用 $store.state.count 来获得状态 count , 类似的 , 我们可以使用 $store.getters.count 来获得状态 count 。

page.vue:

1.  
   <template>
2.  
      <div>  
3.  
         <div>{{$store.getters.count}}</div>
4.  
         <input type="button" @click="$store.dispatch('addPlus')" value="+">
5.  
      </div>
6.  
   </template>
7.  
   <script>
8.  
   import store from '../store/store'
9.  
   export default {
10.  
    }
11.  
    </script>

注意 : $store.getters.count 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。

文章来源：https://blog.csdn.net/qq_42043377/article/details/90697073

mutations
在vue 中，只有mutation 才能改变state.  mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字，

先看上一篇文章的例子：

在没有用vuex的时候，我们可以实现点击颜色切换

用了vuex后，只实现了颜色变换一次的功能，那我们可不可以变换很多次呢？

mutations 登场 , 问题迎刃而解 :

store.js:

1.  
   import Vue from 'vue';
2.  
   import Vuex from 'vuex';
3.  
   Vue.use(Vuex);
4.  
   const state = {
5.  
       show:false
6.  
   }
7.  
   export default new Vuex.Store({
8.  
       state,
9.  
       mutations:{
10.  
            switch_color(state){
11.  
                state.show = state.show?false:true
12.  
            }
13.  
        }
14.  
    })
15.  
    父组件： 
16.  
     
17.  
    <template>
18.  
        <div>
19.  
           <a href="javascript:;" @click="$store.commit('switch_color')">点击</a>
20.  
            <children ></children>
21.  
        </div>
22.  
    </template>
23.  
    <script>
24.  
        import children from "@/components/children"
25.  
        export default {
26.  
            components: {
27.  
                children
28.  
            }
29.  
        }
30.  
    </script>

使用$store.commit('switch_color') 来触发 mutations 中的 switch_color 方法。

再举个例子
1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件

const state = { count:1 }

2、用export default 封装代码，让外部可以引用

export default new Vuex.Store({undefined

    state

  });

store.js:

1.  
   import Vue from 'vue';
2.  
   import Vuex from 'vuex';
3.  
   Vue.use(Vuex);
4.  
   const state = {
5.  
       count:1
6.  
   }
7.  
   export default new Vuex.Store({
8.  
       state,
9.  
       mutations:{
10.  
            add(state){
11.  
                state.count += 1;
12.  
            },
13.  
            reduce(state){
14.  
                state.count -= 1;
15.  
            }
16.  
        }
17.  
    })

新建一个vue的模板，位置在components文件夹下，名字叫page.vue。在模板中我们引入我们刚建的store.js文件，并在模板中用{undefined{$store.state.count}}输出count 的值。

1.  
   <template>
2.  
      <div>  
3.  
         <div>{{$store.state.count}}</div>
4.  
         <input type="button" @click="$store.commit('add')" value="+">
5.  
         <input type="button" @click="$store.commit('reduce')" value="-">
6.  
      </div>
7.  
   </template>
8.  
   <script>
9.  
   import store from '../store/store'
10.  
    export default {
11.  
        
12.  
    }
13.  
    </script>

这样进行预览就可以实现对vuex中的count进行加减了。

注意：mutations里的操作必须是同步的

      你一定好奇 , 如果在 mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要                 在 mutationss 里执行异步操作而已。

actions
action去commit mutations, 所以还要定义action. store.js 里面添加actions.

store.js:

1.  
   import Vue from 'vue';
2.  
   import Vuex from 'vuex';
3.  
   Vue.use(Vuex);
4.  
   const state = {
5.  
       show:false,
6.  
       count:1
7.  
   }
8.  
   export default new Vuex.Store({
9.  
       state,
10.  
        mutations:{
11.  
            switch_color(state){
12.  
                state.show = state.show?false:true
13.  
            },
14.  
            add(state){
15.  
                state.count += 1;
16.  
            },
17.  
            reduce(state){
18.  
                state.count -= 1;
19.  
             }
20.  
         },
21.  
         actions:{
22.  
             addPlus(context){
23.  
                 context.commit('add')
24.  
             },
25.  
             reducePlus(context){
26.  
                 context.commit('reduce');
27.  
             }
28.  
         }
29.  
    })

action 和mutions 的定义方法是类似的，我们要dispatch 一个action, 所以actions 肯定有一个名字，dispatch action 之后它要做事情，就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context,  它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性， context.commit 就会执行commit命令。

　　其实actions 还可以简写一下， 因为函数的参数是一个对象，函数中用的是对象中一个方法，我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions

   

1.  
   actions:{
2.  
            addPlus({commit}){
3.  
               commit('add')
4.  
            },
5.  
            reducePlus({commit}){
6.  
               commit('reduce');
7.  
            }
8.  
        }
9.  
   })

当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.

打开page.vue 组件，给两个按钮添加click 事件。

1.  
   <template>
2.  
      <div>  
3.  
         <div>{{$store.state.count}}</div>
4.  
         <input type="button" @click="$store.dispatch('addPlus')" value="+">
5.  
         <input type="button" @click="$store.dispatch('reducePlus')" value="-">
6.  
      </div>
7.  
   </template>
8.  
   <script>
9.  
   import store from '../store/store'
10.  
    export default {
11.  
        
12.  
    }
13.  
    </script>

context：上下文对象，这里你可以理解称store本身。
{commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。
官方推荐 , 将异步操作放在 action 中。

getter
有的组件中获取到 store 中的state,  需要对进行加工才能使用，computed 属性中就需要写操作函数，如果有多个组件中都需要进行这个操作，那么在各个组件中都写相同的函数，那就非常麻烦，这时可以把这个相同的操作写到store 中的getters,  每个组件只要引用getter 就可以了，非常方便。Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。

 store.js:

1.  
   export default new Vuex.Store({
2.  
       state,
3.  
       getters:{
4.  
           count:function(state){
5.  
              return state.count += 100;
6.  
           }
7.  
       },
8.  
       mutations:{
9.  
           switch_color(state){
10.  
                state.show = state.show?false:true
11.  
            },
12.  
            add(state){
13.  
                state.count += 1;
14.  
            },
15.  
            reduce(state){
16.  
                state.count -= 1;
17.  
             }
18.  
         },
19.  
         actions:{
20.  
             addPlus({commit}){
21.  
                commit('add')
22.  
             },
23.  
             reducePlus({commit}){
24.  
                commit('reduce');
25.  
             }
26.  
         }
27.  
    })

我们在组件中使用 $store.state.count 来获得状态 count , 类似的 , 我们可以使用 $store.getters.count 来获得状态 count 。

page.vue:

1.  
   <template>
2.  
      <div>  
3.  
         <div>{{$store.getters.count}}</div>
4.  
         <input type="button" @click="$store.dispatch('addPlus')" value="+">
5.  
      </div>
6.  
   </template>
7.  
   <script>
8.  
   import store from '../store/store'
9.  
   export default {
10.  
    }
11.  
    </script>

注意 : $store.getters.count 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。