模塊化+命名空間

1, 目的： 讓代碼更好維護

2,  修改store.js

store/Count.js:

注意：namespaced:true,  開啟命名空間

export default {
    namespaced:true,
    //準備actions--用于響應組件中的動作
    actions:{
        increment(context,value){
            context.commit('INCREMENT',value)
            //commit中的increment: 對應mutations中的increment方法
        }
    },
    //準備mutations--用于操作數據(state)
    mutations:{
        INCREMENT(state,value){
            state.sum += value
            console.log(value,state.sum);
         },
         DEINCREMENT(state,value){
             console.log("a",value);
             state.sum -= value
         }
    },
    //準備state = {}
    state:{
        sum:1,
        school:"南昌雅騰",
        subject: "java"
    },
    //準備getters , 用于加工state中的數據， 類似于computed屬性
    getters:{
        bigSum(state){
            return state.sum * 10
        }
    }
}

2, store/index.js

//該文件用于創(chuàng)建Vuex中最為核心 的store
//引入vue
import Vue from "vue";
//引入vuex庫
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex) //讓各個組件中擁有store屬性
import CountAbout from './Count'
export default new Vuex.Store({
    modules:{
        CountAbout
        //......同理，可以引入其它vuex
    }
})

3. 開啟命名空間后，組件中讀取state數據:

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

4，  開啟命名空間后，組件中讀取getters數據

//方式一： 自己直接讀取
this.$store.getters['CountAbout/bigSum']
//方法二： 借助mapGetters讀取
...mapGetters('CountAbout',['bigSum'])

5，  開啟命名空間后，組件中調用dispatch

//方式一： 自己直接讀取
this.$store.dispatch('CountAbout/increment')
//方法二： 借助mapGetters讀取
...mapActions('CountAbout',['increment'])

6，  開啟命名空間后，組件中調用commit

//方式一： 自己直接讀取
this.$store.commit('CountAbout/DEINCREMENT')
//方法二： 借助mapGetters讀取
...mapMutations('CountAbout',['DEINCREMENT']),

詳細借助調用：

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

<template>
  <div>
         <p>當前的和是:{{sum}}</p>
         <p>當前的和*10的結果是:{{bigSum}}</p>
         <p>我在{{school}}, 學習{{subject}}</p>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <button @click="increment(n)">加一</button>
        <button @click="DEINCREMENT(n)">減一</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
    name:'Count',
    data() {
        return {
           n:1 
        }
    },
    methods:{
        //程序員自己寫
        // deincrement(){
        //     this.$store.commit('DEINCREMENT',this.n)
        //     //commit中的increment: 對應store.js中mutations中的increment方法
        //     //如果不需要actions做什么(即不需要服務員做什么), 可以直接找后廚

        // },
        //借助mapMutations生成對應的方法，方法中會調用commit去聯系mutations(對象寫法)
        // ...mapMutations({'DEINCREMENT':'DEINCREMENT'})
        //借助mapMutations生成對應的方法，方法中會調用commit去聯系mutations(數組寫法)
        ...mapMutations('CountAbout',['DEINCREMENT']),
        //注意，以上調用方法要傳值

        //程序員自己寫
        // increment(){
        //     this.$store.dispatch('increment',this.n)
        //     //dispatch中的increment: 對應store.js中actions中的increment方法

        // },

        //借助mapActions生成對應的方法，方法中會調用dispatch去聯系actions(對象寫法)
        // ...mapActions({'increment':'increment'})

        //借助mapActions生成對應的方法，方法中會調用dispatch去聯系actions(數組寫法)
        ...mapActions('CountAbout',['increment'])
    },
     computed:{
        //借助mapState生成計算屬性, 從state中讀取數據(對象寫法)
        // ...mapState({sum:'sum',school:'school',subject:'subject'}),
        //借助mapState生成計算屬性, 從state中讀取數據(數組寫法)
        ...mapState('CountAbout',['sum','school','subject']),
        
        //以上相當于下面的寫法
        // sum(){
        //     return this.$store.state.sum
        // },
        // school(){
        //     return this.$store.state.school
        // },
        // subject(){
        //     return this.$store.state.subject
        // }

        //借助mapGetters生成計算屬性, 從getters中讀取數據(對象寫法)
        // ...mapGetters({bigSum:'bigSum'})
        //借助mapGetters生成計算屬性, 從getters中讀取數據(數組寫法)
         ...mapGetters('CountAbout',['bigSum'])
          //以上相當于下面的寫法
        //   ,bigSum(){
        //         return this.$store.getters.bigSum
        //   }
    },
    mounted() {
        const x = mapState({sum:'sum',school:'school',subject:'subject'})
        console.log(x);
    },
}
</script>

<style>

</style>