1.state
vuex中变量存放处,调用方法如下:
(1)在其他组件中调用可以使用mapState,使用方法如下:
从vuex中引入mapState函数,在计算属性中将mapState函数解构,解构之后其中的参数就是你需要在页面中引入vuex中的变量,这样就可 以在组件中this.msg来使用该存于vuex中的变量了。
例如:引入mapState函数:import { mapState } from "vuex";
在计算属性中引入vuex中的msg变量: ..mapState(【‘msg’】)
(2)使用this.$store.state.msg进行vuex中的变量的使用。
2.Mutation(同步改变state中的值)
vuex中改变state中变量的方法,当我们需要修改store里面的状态时,我们不是在组件里面直接去修改它们,而是通过mutation里面的方法来进行修改。调用方法如下:
(1)在其他组件中调用可以使用mapMutation函数,使用方法如下:
从vuex中引入mapMutation函数,在methods中解构,将其映射为该组件中的一个方法,就可以在该组件中使用该方法改变vuex中state中 的值了。
例如:引入mapMutations函数:import { mapMutations } from "vuex";
将其中的方法映射为该组件的方法:...mapMutations (['set-Msg'])
之后就可以使用引入的方法,其中传递的参数是需要改变的值:this.set-Msg('传值')
(2)直接使用this.$store.commit(方法名,传递的参数)
3.Action(Action 提交的是 mutation,而不是直接变更state)
在vuex中异步改变vuex中的值,需要使用到action函数。Action 是需要使用context.commit('Mutation中的方法', ‘传递的值’)对Mutation中的方法 进行调用进而间接改变state中的值;也可以使用mapAction映射出Action中的方法
其中‘皮卡丘’可以变成在调用this.act_Msg时传递过来的值,action中的act_Msg同时也需要第二个参数来接受。