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

zoukankan html css js c++ java

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. 父组件：
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 {
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 {
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. 父组件：
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 {
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 {
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 发生变化才能修改。
查看全文

相关阅读:
插入迭代器
 operator[] 和 insert
STL注意比较函数
 remove、erase
reserve的使用
 allocator
【转】【模板】求割点和桥
 【模拟，时针分针秒针两两夹角】【没有跳坑好兴奋】hdu
【强连通分量分解】
【模拟ACM排名】ZOJ-2593 Ranking （Andrew Stankevich’s Contest #5）

原文地址：https://www.cnblogs.com/liangziaha/p/15489701.html