vuex中的modules

Love The Way You Lie 2022-02-26 09:10 246阅读 0赞

**vuex中将数据模块化**

**1. 在vuex中将组件模块化，注意：加属性：namespaced：true；命名空间**

const downloade = {
        namespaced: true, //命名空间为true
        state: {
          personList: [],
        },
        getters: {
          newPerson (state, getters) {
            return state.personList.map((item, index) => {
              if(index == 0) {
                return '@@@@' + item + getters.a
              }else if(index < 3) {
                return '###' + item + '$$$'+ getters.a
              }else {
                return '++' + item + '***'+ getters.a
              }
            })
          },
          a () {
            return '1111'
          }
        },
        mutations: {
          changePersonList (state, addValue) {
            state.personList.push(addValue)
          },
        },
        actions: {
          changeP (ctx, addValue) {
            setTimeout( () => {
              ctx.commit('changePersonList', addValue);//触发mutations中的changePersonList函数
            }, 1000)
           
          }
        }
    }
    const personal = {
        namespaced: true, //命名空间为true
        state: {
          login: false,
        },
        getters: {
    
        },
        mutations: {
          changeLogin (state, value) {
            state.login = value
          }
        },
        actions: {
    
        }
    }

**（2）在Store中加modules属性**

export default new Vuex.Store({
      strict: true, // 严格模式
      state: {
        
        name: 'zhu',
        age: 23,
        personList: [],
      },
      getters: {
    
      },
      mutations: {
    
    
      },
      actions: {
    
      },
      modules: {
        downloade,
        personal
      }
    })

**2. 组件中的使用：**

**（1）组件中用来触发vuex中的函数的commit和dispatch：在函数前面加模块名，哪个模块下的函数**

this.$store.commit('personal/changeLogin',this.loginFlag)

this.$store.dispatch('download/changeP', this.addValue)

**（2）展开运算符中，state是对象，state下的downloade，download下数据。**

...mapState({
            personList: state => state.download.personList, 
          }),

总之，与state相关的，在state后加命名空间，为什么呢？我们**来看下state对象**：

1）this.$store 即 vuex中的Store，state对象就是在State下；

2）state对象：**age和name正是Store下的state属性中的属性，而download和personal正是命名空间的名字。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

3）在download和personal下面：又有自己的state下的值

![20190329134441359.png][]

![20190329134454513.png][]

结论：modules使得组件模块化，我们应该注意到的是：将vuex中数据池进行了模块化，数据结构：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][]

**（3）展开运算符中，前面加一个属性，‘download’，告诉mapGetters，newPerson计算属性是download下的getters中的。**

...mapGetters ('download',['newPerson'])

3. 将每个组件所需要的vuex值，抽离出来放在一个文件中，然后在store.js中引入。

（1）store.js中：

![20190329140938126.png][]

![20190329140948681.png][]

在src文件夹下的assets文件夹的vuex文件夹下的download.js文件和personal.js文件

将组件所需的vuex数据对象导出：

export default {
      namespaced: true, //命名空间为true
      state: {
        login: false,
      },
      getters: {
    
      },
      mutations: {
        changeLogin (state, value) {
          state.login = value
        }
      },
      actions: {
    
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220226/bc654e8e4f4648f7add9459938555bb5.png
[20190329134441359.png]: /images/20220226/4d9471416ebd48cbac79e33ec19ee7fc.png
[20190329134454513.png]: /images/20220226/f18ed8105ea74f4a89d104008b24a0bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20220226/d4e8a56027d74fc0864efda1f63ab9c0.png
[20190329140938126.png]: /images/20220226/a59e802288f649e6979907f31cba1495.png
[20190329140948681.png]: /images/20220226/7103ab4bc85d48309341db20077b996d.png