学习笔记Vue（二十四）——vuex module

为了使我们每个页面组件的state分离开，可以使用modules来给vuex分模块。
先在src文件夹下创建一个store文件夹，用来存放我们的模块文件，然后把store.js也放到这个文件夹下，作为入口文件。

然后不要忘了修改main.js里引入store.js的路径

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'  //原来是  './store'

在store.js里引用你自己创建的模块：

import Vue from 'vue'
import Vuex from 'vuex'
import student from './student'  //引用你创建的student模块

Vue.use(Vuex)    //通过$store去获取到vuex中的state   $store.state.name 

export default new Vuex.Store({
  //严格模式 在 开发环境开，在生产环境不开
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    student,
  }
})

student.js

export default {
    namespaced: true,
    state: {
        name: 'grandmaz',
        age: 22,
        studentList: []
    },
    getters: {
        person(state) {
            return `姓名：${state.name} 年龄：${state.age}`;
          },
          newStudentList(state){
            return state.studentList.map(student => `姓名：${student.name} 年龄：${student.age}`);
          }
    },
    mutations: {
        changeStudentList (state, {tempObj, name}){
            state.studentList.push(tempObj);
            state.name = name;
          }
    },
    actions: {
        changeStudentList ({commit}, payload){
            //payload 传递的参数
            setTimeout(()=>{
                commit('changeStudentList',payload);
            },1000);
          }
    }
}

modules 可以根据功能让vuex 的state分模块，
state会放入到每一个模块下，getters，mutations，actions会直接放到全局。

（一） 获取vuex中的数据（无namespaced）：

1. 获取state： this.$store.state.modulename.xxx
2. 获取getters：this.$store.getters.xxx
3. 获取mutations：this.$store.commit(‘xxx’)
4. 获取actions：this.$store.dispatch(‘xxx’)
5. 可以通过mapXXX方式拿到 getter、mutations、actions，但是不能拿到state，如果需要这种方式获取state，需要加命名空间，namespaced：true

（二） 获取vuex中的数据（有namespaced）：

1. 获取state： this.$store.state.modulename.xxx
2. 获取getters：this.$store.getters[‘modulename/getters’].xxx
3. 获取mutations：this.$store.commit(‘modulename/xxx’)
4. 获取actions：this.$store.dispatch(‘modulename/xxx’)
5. 通过mapXXX获取：mapXXX(‘modulename’, [‘xxx’])
   mapXXX(‘modulename’,{})