Vue学习笔记63--vuex模块化 + namespace

vuex模块化 + namespace

 

 

 

 

示例一： 目录结构如下所示

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false
10 import store from './store'//默认引入index.js

// console.log('Vue.prototype==>', Vue.prototype)
// console.log('VueComponent.prototype.__proto__==>', Vue.prototype)

new Vue({
  render: h => h(App), store
  
}).$mount('#app')

App.vue

<template>
  <div class="app">
    <Count />
    <hr>
    <!-- <Person /> -->
    <Person2 />
  </div>
</template>

<script>
// 引入组件
import Count from './components/Count.vue';
import Person from './components/Person.vue';
import Person2 from './components/Person2.vue';
export default {
  name: 'App',
  components: { Count, Person, Person2 },


}
</script>

<style scoped>
</style>

count.js==> namespaced: true,

/* 求和组件相关的配置 */
// const countOptions = {
export default {
  // 使用后，在应用的地方就可以直接使用 该配置对象中的属性了
  namespaced: true,
  actions: {
    incrementOdd (context, value) {
      if (context.state.sum % 2) {
        context.commit('Increment', value)//等价于Increment
        // context.commit('IncrementOdd', value)//等价于Increment
      }
    },
    incrementWait (context, value) {
      setTimeout(() => {
        context.commit('Increment', value)//等价于 IncrementWait
        // context.commit('IncrementWait', value)//等价于Increment
      }, 1000);

    },
  },
  mutations: {
    Increment (state, value) {
      state.sum += value
    },
    Decrement (state, value) {
      state.sum -= value
    },
    IncrementOdd (state, value) {
      state.sum += value
    },
    IncrementWait (state, value) {
      state.sum += value
    },
  },
  state: {
    sum: 0,//当前的和
    school: '高新一中',
    subject: '语数外',
  },
  getters: {
    bigSum (state) {
      return state.sum * 10
    }
  },
}

// export default countOptions

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('AddPerson', value)
      }
      else {
        alert('请添加姓王的人')
      }
    },
  },
  mutations: {
    AddPerson (state, value) {
      state.personList.unshift(value)
    },
  },
  state: {
    personList: [{ id: '001', name: 'zhangsan' }] //数组
  },
  getters: {
    firstPersonName (state) {
      return state.personList[0].name
    }
  },
}

index.js

// 该文件用于创建vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用插件
Vue.use(Vuex)


import personOptions from './person'
import countOptions from './count'

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

Count.vue

<template>
  <div>
    <h2 style="color: brown">------------求和组件">------------</h2>
    <h3>当前求和*10为：{{ bigSum }}</h3>
    <h3>当前求和为：{{ sum }}</h3>
    <h3>我在：{{ school }}，学习:{{subject }}</h3>
    请选择数量：<select v-model.number="selectNo">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select><br>

    <button @click="increment(selectNo)">mutation对象方式+</button>
    <button @click="decrement(selectNo)">mutation对象方式-</button> <br>

    <button @click="Increment(selectNo)">mutation 数组方式+</button>
    <button @click="Decrement(selectNo)">mutation 数组方式-</button><br>

    <button @click="incrementOdd(selectNo)">当前为奇数再加</button>
    <button @click="incrementWait(selectNo)">等一下再加</button>

    <h3 style="color: brown">多组件共享数据展示，Person组件总人数是：{{personList.length }}</h3>
    <ul>
      <li v-for="p in personList"
          :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'Count',
  data () {
    return {
      selectNo: 1,//当前选择的数字
    }
  },
  // 通过计算属性获取state数据
  computed: {
    // state 中获取数据
    ...mapState('countOptions', ['sum', 'school', 'subject']),
    ...mapState('personOptions', ['personList']),

    // getters中获取数据
    // ...mapGetters('countOptions', { bigSum: 'bigSum' }),//对象写法
    ...mapGetters('countOptions', ['bigSum']),//对象写法

  },
  mounted () {
    console.log('count this==>', this)
    console.log('count this.$store==>', this.$store)
  },
  methods: {
    // mutations 获取数据 中不建议已处理业务逻辑
    ...mapMutations('countOptions', { increment: 'Increment', decrement: 'Decrement' }), //对象写法
    ...mapMutations('countOptions', ['Increment', 'Decrement']), //数组写法(数组写法使用时，使用组件中的方法命名必须和mutations中的一致)

    // actions中 获取数据 可处理业务逻辑
    ...mapActions('countOptions', ['incrementOdd', 'incrementWait']), //数组写法

  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>

Person.vue

<template>
  <div>
    <h2 style="color: brown">------------人员组件">------------</h2>
    <h3 style="color: brown">多组件共享数据展示，Count组件求和结果是：{{sum }}</h3>
    uuid==>{{ uuid }} <br>
    nanoid==>{{nanoid}}
    <h3>列表中第一个人员姓名是：{{ firstPersonName }} </h3>
    <h3>人员信息列表</h3>
    <input type="text"
           placeholder="请输入姓名"
           v-model="name">
    <button @click="addPerson()">添加</button>
    <button @click="addPersonWang()">添加一个姓王的人</button>
    <ul>
      <li v-for="p in personList"
          :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
// import { mapState } from 'vuex';
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'
import { nanoid } from 'nanoid'
import { v4 as uuidv4 } from 'uuid';

export default {
  name: 'Person2',
  data () {
    return {
      name: '',
      uuid: uuidv4(),
      nanoid: nanoid()
    }
  },
  computed: {
    // personList () {
    //   return this.$store.state.personList
    // this.$store.state.personOptions.personList
    // },  等价于下面写法

    /* 三种写法
    写法一：计算属性写法
    写法二：对象写法
    写法三：数组写法
     */
    // 写法一：getters 
    // firstPersonName () {
    //   // const aa = this.$store.getters['personOptions/firstPersonName']
    //   // console.log('log==>', aa)
    //   return this.$store.getters['personOptions/firstPersonName']
    // },

    // 写法二
    // ...mapGetters('personOptions', { firstPersonName: 'firstPersonName' }),//对象写法
    // 写法三
    ...mapGetters('personOptions', ['firstPersonName']),//数组写法


    // this.$store.state.countOptions.sum
    ...mapState('countOptions', ['sum']),

    // this.$store.state.personOptions.personList
    ...mapState('personOptions', ['personList']),


  },

  methods: {
    addPerson () {
      this.uuid = uuidv4()

      const person = { id: nanoid(), name: this.name }
      console.log('person obj==>', person)
      //调用mutations中的新增方法
      this.$store.commit('personOptions/AddPerson', person)
      this.name = ''
    },
    addPersonWang () {
      const person = { id: nanoid(), name: this.name }
      // 存在业务逻辑找actions
      this.$store.dispatch('personOptions/addPersonWang', person)
      this.name = ''
    },
  },
}
</script>

<style>
</style>