随笔- 37 文章- 5 评论- 3 阅读- 26521

Vuex 模块化和命名空间

目的：让代码更好维护，让多种数据分类更加明确。

模块化会将不同模块的内容拆分到不同的文件中

1、新建src/store/count.js模块

//求和相关的配置，actions、mutations、state、getters都是求和的内容
export default {
    namespaced:true,//开启命名空间
    actions:{//异步修改，交给mutations进行修改
        jiaOdd(context,value){
            console.log('actions中的jiaOdd被调用了')
            if(context.state.sum % 2){
                context.commit('JIA',value)
            }
        },
        jiaWait(context,value){
            console.log('actions中的jiaWait被调用了')
            setTimeout(()=>{
                context.commit('JIA',value)
            },500)
        }
    },
    mutations:{//唯一修改，同步
        JIA(state,value){
            console.log('mutations中的JIA被调用了')
            state.sum += value
        },
        JIAN(state,value){
            console.log('mutations中的JIAN被调用了')
            state.sum -= value
        },
    },
    state:{//数据
        sum:0, //当前的和
        school:'尚硅谷',
        subject:'前端',
    },
    getters:{//计算
        bigSum(state){
            return state.sum*10
        }
    },
}

2、新建str/store/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(
                response => {
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:'001',name:'张三'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    },
}

3、src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
//导入模块内容
import countOptions from './count'
import personOptions from './person'

Vue.use(Vuex)

export default new Vuex.Store({
    //配置modules
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

开启命名空间后，需要注意组件上进行如何取值时

countAbout和personAbout是命名空间，可以看出在state和getters上的数据结构有所不同，

<!-- Count.vue -->
<template>
  <div>
    <h1>当前求和为：{{sum}}</h1>
    <h3>当前求和放大10倍为：{{bigSum}}</h3>
    <h3>我在{{school}}，学习{{subject}}</h3>
    <h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
  export default {
    name:'Count',
    data() {
      return {
        n:1, //用户选择的数字
      }
    },
    computed:{
      //第一个参数是指定了命名空间
      //借助mapState生成计算属性，从state中读取数据。（数组写法）
      ...mapState('countAbout',['sum','school','subject']),
      ...mapState('personAbout',['personList']),

      //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
      ...mapGetters('countAbout',['bigSum'])
    },
    methods: {
      //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
      ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

      //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
      ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    },
    mounted() {
      console.log(this.$store)
    },
  }
</script>

<style lang="css">
  button{
    margin-left: 5px;
  }
</style>

<!-- Person.vue -->
<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color:red">Count组件求和为：{{sum}}</h3>
    <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个人，名字随机</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
  import {nanoid} from 'nanoid'
  export default {
    name:'Person',
    data() {
      return {
        name:''
      }
    },
    computed:{
      personList(){
        //从state中取值
        return this.$store.state.personAbout.personList
      },
      sum(){
        return this.$store.state.countAbout.sum
      },
      firstPersonName(){
        //从getters中取值，因为key中带有/，所以只能用[]的方式进行取值
        return this.$store.getters['personAbout/firstPersonName']
      }
    },
    methods: {
      add(){
        const personObj = {id:nanoid(),name:this.name}
        //commit时，/前是命名空间
        this.$store.commit('personAbout/ADD_PERSON',personObj)
        this.name = ''
      },
      addWang(){
        const personObj = {id:nanoid(),name:this.name}
        this.$store.dispatch('personAbout/addPersonWang',personObj)
        this.name = ''
      },
      addPersonServer(){
        this.$store.dispatch('personAbout/addPersonServer')
      }
    },
  }
</script>

3. 开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

4. 开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

5. 开启命名空间后，组件中调用dispatch

 //方式一：自己直接dispatch
 this.$store.dispatch('personAbout/addPersonWang',person)
 //方式二：借助mapActions：
 ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6. 开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),