vuex的modules到底该如何使用？

vuex构成

vuex主要包含以下五个部分:

• State // 存储变量、数据
• Getter // 类似计算属性
• Mutation // 唯一修改state的方法
• Action // 异步调用Mutation
• Module // 将store模块化

【VUEX】

vuex的modules使用

创建目录

在此示例中，我创建了两个store文件，分别是 profile.js和custom.js，一个根文件index.js

custom.js

const customs = {
   
   
    namespaced: true, // 创建命名空间
    state: {
   
    // 存储变量
        showAlert: false
    },
    mutations: {
   
    // 定义修改state方法
        CHANGESHOW: (state, params) => {
   
   
            state.showAlert = !state.showAlert
        }
    },
    actions: {
   
    // 异步调用mutations
        setShow: ({
    
     commit }) => {
   
   
            commit('CHANGESHOW')
        }
    },
    getters: {
   
    // 将数据过滤输出
        bodyShow: state => state.showAlert
    }
}
export default customs

profile.js

const profile = {
   
   
  namespaced: true,
  state: {
   
   
    name: 'common name',
    age: 18