Vuex有五个核心概念:
state, getters, mutations, actions, modules。
- state:vuex的基本数据,用来存储变量
state: {
userId: '',
name: '',
token: '',
}
//在vue中使用 this.$store.state.userId
在vue中使用 this.$store.state.userId
- geeter:从基本数据(state)派生的数据,相当于state的计算属性,具有返回值的方法
mutations: {
SET_USER: (state, userId) => {
state.userId = userId
},
SET_TOKEN: (state, token) => {
// console.log(token)
state.token = token
}
},
commit:同步操作,写法: this.$store.commit(‘mutations方法名’,值)
列如:
this.$store.commit('SET_USER','123456')
回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
- action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
actions: { // {} 是es6中解构,把对象解构成属性
login({ commit }, value) {
commit('SET_USER', value)
// commit('SET_TOKEN', value2)
},
}
//dispatch:异步操作,写法: this.$store.dispatch(‘mutations方法名’,值)
dispatch:异步操作,写法: this.$store.dispatch(‘mutations方法名’,值)
- modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
简单来说就是在SRC建一个modules文件夹,把以上的 state、mutation、action、getters 整合成一个moudleA.js
export default {
state: {
text: 'moduleA'
},
getters: {},
mutations: {},
actions: {}
}
然后引入到store.js里面
import moduleA from './module/moduleA';
import moduleB from './module/moduleB';
export default new Vuex.Store({
modules: {
moduleA, moduleB,
},
// ...
}
这个时候,store 中已经注入了两个子模块 moduleA moduleB,我们可以在 App.vue 中通过 this.$store.state.moduleA.text 这种方式来直接访问模块中的 state 数据。如下修改:
// ...
computed: {
...mapState({
name: state => state.moduleA.text
}),
},
// ...
注意:模块内部的 action、mutation 和 getter 默认是注册在全局命名空间的。
通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
我们在 moduleA.js 中添加 namespaced: true。
export default {
namespaced: true,
// ...
actions: {
callAction({state, commit, rootState}) {
commit('setName', '改变');
alert(state.text + '-' + rootState.name);
}
}
}