vuex模塊化。

項目結構：

 

1：在src下新建目錄store，然後再建storemodule.js文件，把 上篇 store.js文件抽出來：

import Vue from 'vue'
import Vuex from 'vuex'
import countsub from './countsub' //.js 或者.vue可以省略，其他文件不可以。

Vue.use(Vuex)
export default new Vuex.Store({
modules:{
    countsub,
}
})

2：在store目錄下再建countsub.js文件，抽離上篇store.js文件中vuex的四部分內容，然後在storemodule.js文件中註冊：

export default{
    state:{
        count:0
       },
       getters:{
           addcountgetters(state){
              return state.count + 4;
           }
       },
       mutations:{//相當於methods,定義一些方法(同步)。方法裏有個默認參數--state
         addcount(state){
             state.count++;
         },
         subcount(state){
             state.count--;
         }
       },
       actions:{//異步操作（也可以定義同步方法）。提交mutation，而不是直接變更狀態。
         addcountasync(context){
             setTimeout(()=>{
               context.commit('addcount');
             },1000);//延遲一秒。
         }
       }
}

 

 3：修改main.js中的註冊文件：

 4：修改store.vue中computed的屬性內容。如果是用字符串的必須改成用箭頭函數，並且state後面必須加新的模塊名稱（countsub）。

即state.countsub.count

<template>
    <div>
    <!-- <h5 style="backgroudcolor:red">Vuex:{{showstorecount}}</h5> -->
    <h5>Vuex:{{showcount}}</h5>
    <h5>計算屬性:{{showstatevalue}}</h5>
    <h5>vuex中的計算屬性：getters:{{addcountgetters}}</h5>
    </div>
</template>

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

    export default {
        // computed: {//第一種方式。
        //     showstorecount() {
        //         return this.$store.state.count; 
        //     }
        // },
        // computed:mapState({ //第二種，但是這樣就使用不了計算屬性啦。
        //     count:state=>state.count,
        //     showcount:'count' //等於 count:state=>state.count
        // })
        computed:{
            ...mapState({//es6 展開。這樣既可以用vuex，也可以使用計算屬性。
            //  showcount:'count', //分模塊後，不能用字符串方式，而是用箭頭方式，並且state後需跟模塊名。
            showcount:state=>state.countsub.count,//2019.12.14
            }),
            // ...mapGetters([//名字和getters中的屬於一樣時，用數組就可以映射。
            //     'addcountgetters'
            // ]),
            showstatevalue(){//監聽中使用計算屬性監聽vuex中的數據。
                //return this.$store.state.count*2;//沒分模塊之前的寫法。2019.12.14
                return this.$store.state.countsub.count * 2;//分模塊後的寫法。就是必須在sate後跟state對應模塊名。
            },
            addcountgetters(){
                return this.$store.getters.addcountgetters;//getters屬性不受模塊影響。
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>