在上一篇中我们初步使用了vuex,并且在组件中实际使用了vuex。
现在,如果我们的项目分了好多模块,比如有登陆模块,有信息展示模块,有详情模块,此时如果都写在index.js中,那么我们的模块就比较臃肿,不清晰,
所以,此时就要用到vuex的moduls 来分不同的业务模块
在store文件夹下新建一个modules 文件夹,在此文件夹下我们就可以划分不同的业务模块
由此,我们将我们上一次的文件进行整理,将index.js中products模块中的东西抽离出来,单独放在modules下的products.js中
store/modules/products.js
export default {
namespaced: true,
state: {
list: ['Apple', 'Bbanana', 'Peach', 'Grape']
},
// 所有对state的操作的方法都会放在mutations中
mutations: {
// state 表示当前模块的数据
// payload 表示参数
add (state, payload) {
state.list.push(payload)
}
},
// 异步操作
actions: {
// 所有的异步操作都在actions中
// 在actions中也可以直接改变state中的数据,但是不建议这样做,因为不会被追踪到
addAsync (context, payload) {
setTimeout(() => {
// context.state.list.push(payload) // 这样直接改变state不会被dev-tools 追踪到变化
context.commit('add', payload) // commit 表示触发一个mutation
}, 1000)
}
}
}
在index.js中
import Vuex from 'Vuex'
import Vue from 'vue'
import products from './modules/products' // 导入 products 模块
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
counter: 1,
app: 'vuex-app'
},
// 一个单独的模块包含state, mutations, actions, getters 这些内容
modules: {
products // products: products
}
})
export default store // 导出store
// 这样只在index.js中管理模块,不用写业务处理代码,而在具体的模块中写具体的业务逻辑即可