vuex模块化

22449fea8ead6f9ef2900c8a8d6fa3b.png

App.vue

<template>
  <div>
    <Count />
    <hr />
    <Person />
  </div>
</template>

<script>
// 引入组件
import Count from './components/Count'
import Person from './components/Person.vue'

export default {
  name: 'App',
  components: { Count, Person },
}
</script>

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 { mapActions, mapGetters, mapMutations, mapState } 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('countAbout', { increment: 'JIA', decrement: 'JIAN' }),

    /* ************************************************ */
    ...mapActions('countAbout', {
      incrementOdd: 'jiaOdd',
      incrementWait: 'jiaWait',
    }),
  },
  mounted: {},
}
</script>

<style>
button {
  margin-left: 10px;
}
</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="addPersonWang">添加一个姓王的人</button>
    <button @click="addPersonServe">添加一个人,名字随机</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',
  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 = ''
    },
    addPersonWang() {
      const personObj = { id: nanoid(), name: this.name }
      this.$store.dispatch('personAbout/addPersonWang', personObj)
      this.name = ''
    },
    addPersonServe() {
      this.$store.dispatch('personAbout/addPersonServer')
    },
  },
}
</script>

<style scoped></style>

index.js

// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入vuex
import Vuex from "vuex";
import countOptions from './count'
import personOptions from './person'
Vue.use(Vuex)

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

count.js(只写count相关逻辑)

//求和功能相关的配置
export default {
  namespaced:true,
  actions: { 
    jiaOdd(context,value){
  //  console.log("actions中的jian调用了")
      context.commit('JIAODD', value)
    },
    jiaWait (context, value) {
  //  console.log("actions中的jian调用了")
      context.commit('JIAWAIT', value)
    }
  },
  mutations: {
     JIA(state,value){
      //  console.log("mutations中的jia调用了")
      state.sum += value
    },
    JIAN (state, value) {
      //  console.log("mutations中的jia调用了")
      state.sum -= value
    },
    JIAODD (state, value) {
      //  console.log("mutations中的jia调用了")
      if (state.sum % 2) {
        state.sum += value
      }
    },
    JIAWAIT (state, value) {
      //  console.log("mutations中的jia调用了")
      setTimeout(() => {
        state.sum += value
      }, 500);
    },
  },
  state: {
     sum: 0,//当前的和
     school: '清华大学',
     subject: '前端',
  },
  getters: {
    bigSum (state) {
      return state.sum * 10
    }
  }
}

person.js(只写person相关逻辑)

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
    }
  }
}