[JavaScript知识库]Vuex模块化_简易求和案例（二）

vuex模块化

最重要的需要 开启命名空间 。

注：

state的分类 countAbout、personAbout

getters的分类 personAbout/firstPersonName

1.组件中读取state数据

this.$store.state.personAboutList
...mapState('countAbout',['sum','school','subject'])

2.组件中读取getters数据

this.$store.getters['persoAbout/firstPersonName']
...mapGetters('countAbout',['bigSum'])

3.组件中调用dispatch

this.$store.dispatch('personAbout/addPersonWang',person)
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

4.组件中调用commit

this.$store.commit('personAbout/ADD_PERSON',personObj)
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

求和案例

对于求和案例添加新组件Person

• 实现组件数据共享—对于求和案例添加新组件Person
• vuex模块化—添加count.js person.js 文件

Count.vue

<template>
  <div>
      <h1>当前求和为：{{sum}}</h1>
      <h3>当前求和放大十倍为：{{bigSum}}</h3>
      <h3>我在{{school}}，学习{{subject}}</h3>
      <h3 style="color:red">Person组件的总人数：{{personList.length}}</h3>
      <select v-model="n">
          <option :value="1">1</option>
          <option :value="2">2</option>
          <option :value="3">3</option>
          <!-- 加了冒号后对引号内容进行js表达式解析 不加后作为字符串 -->
      </select>
      <!-- 不写括号仍然传参 即event 这为鼠标点击事件 -->
      <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,        //用户选择的数
        }
    },
    methods: {
        ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
        ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    },
    computed:{
        //数组写法 生成的计算属性和读取的名一致
        ...mapState('countAbout',['sum','school','subject']),
        ...mapState('personAbout',['personList']),

        //借助mapGetters生成计算属性，从getters中读取数据（对象写法）
        ...mapGetters('countAbout',['bigSum']),
        
    }
}
</script>

<style>
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(){
            return this.$store.state.personAbout.personList
        },
        sum(){
            return this.$store.state.countAbout.sum
        },
        firstPersonName(){
            return this.$store.getters['personAbout/firstPersonName']        
        }
    },
    methods: {
        add(){
            const personObj = {id:nanoid(),name:this.name}
            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>

store文件内

index.js

//用于创建vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引入求和相关配置
import countOptions from './count'
//引入人员相关配置
import personOptions from './person'
//使用vuex
Vue.use(Vuex)

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

count.js

export default {
    namespaced:true,			//开启命名空间
    actions: {
        jiaOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500);
        }
    },
    mutations: {
        JIA(state, value) {      //参数state-sum value
            state.sum += value
        },
        JIAN(state, value) {      //参数state-sum value
            state.sum -= value
        },
    },
    state: {
        sum: 0,
        school: '尚硅谷',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

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) {
            state.personList.unshift(value)
        }
    },
    state: {
        personList: [
            { id: '001', name: '张三' }
        ]
    },
    getters: {
        firstPersonName(state){
            return state.personList[0].name
        }
    }
}