Vue中使用vuex(五)

vuex的模块化+命名空间

1. 目的:让代码更好维护,让多种数据分类更加明确.

2. 创建person.js

import axios from "axios"
import { nanoid } from "nanoid"

export default {
  namespaced: true,//开启命名空间
  actions: {
    addPersonWang(context, value) {
      if (value.name.indexOf('王') === 0) {
        context.commit('ADD_PERSON', value)
      } else {
        alert("添加的人必须姓王")
      }
    },
    addPersonServer(context) {
      axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
        resp => {
          context.commit('ADD_PERSON', { ID: nanoid(), name: resp.data })
        },
        error => {
          console.log(error);
        }
      )
    }
  },
  mutations: {
    ADD_PERSON(state, personObj) {
      state.personList.unshift(personObj)
    }
  },
  state: {
    personList: [
      { id: '001', name: '张三' }
    ]
  },
  getters: {
    firstPersonName(state) {
      return state.personList[0].name
    }
  },
}

3. 修改store.js

//该文件用于创建Vuex中store
import Vuex from 'vuex'
import Vue from 'vue'
//引入person
import personOptions from './person'
import countOptions from './count'

Vue.use(Vuex)


//创建并暴露store
export default new Vuex.Store({
	//修改
  modules:{
    countOptions:countOptions,
    personOptions:personOptions,
  }
});

4. 开启命名空间后,组件读取state数据

//方式1 自己读取
this.$store.state.personOptions.personList
//方式2 借助mapState
...mapState('countOptions',['sum','school'])

5. 开启命名空间后,组件读取getters数据

//方式1
this.$store.getters['personOptions/firstPersonName']
//方式2
...mapGetters('countOptions',['bigSum'])

6. 开启命名空间后,组件中调用dispatch

this.$store.dispatch('personOptions/addPersonWang',person)

..mapActions('personOptions',['addPersonWang'])

7. 开启命名空间后,组件中调用commit

this.$store.commit('personOptions/ADD_PERSON',person)

...mapActions('personOptions',{addPerson:'ADD_PERSON'})