專案主要檔案有：testPage_1.vue，testPage_2.vue，testPage_3.vue，store中的index.js

testPage_1.vue：使用最直接的方法訪問store

testPage_2.vue：modules 模組化 以及 元件中引入 mapGetters、mapActions 和 mapStates的使用

testPage_3.vue：使用map輔助函式的方法訪問store

index.js：狀態管理

下面直接貼出程式碼：

testPage_1.vue：

<template>
  <div class="testPage_1">
    <h1>welcome to testPage_1</h1>
    <h1>'使用最直接的方法訪問store'</h1>
    <h1>this.$store.state.count: {{this.$store.state.count}}</h1> <!-- 直接用state訪問狀態 -->
    <h1>getCount: {{getCount}}</h1>
    <!-- <h1>{{this.$store.getters.getCount}}</h1> -->
    <h1>getDoneTodos: {{getDoneTodos}}</h1>
    <h1>text in getTodoById: {{getTodoById.text}}</h1>
    <button @click="addCount">+1</button>
    <input v-model="number"><button @click="addNumCount(number)">+n</button>
    <h1>number : {{number}}</h1>


  </div>
</template>

<script>
export default {
  name: 'testPage_1',
  data () {
    return {
      number:21,
    }
  },
  computed:{
     getCount(){    //經過getters訪問狀態
       return this.$store.getters.getCount;   //像計算屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算
     },
     getDoneTodos(){
       return this.$store.getters.doneTodos;
     },
     getTodoById(){
       return this.$store.getters.getTodoById(2);
     }
  },
  methods:{
    addCount(){   //使用actions
      this.$store.dispatch('addCount')
    },
    addNumCount(number){
      this.$store.dispatch('addNumCount',parseInt(number))
    }
  }
}
</script>
 

testPage_2.vue：

<template>
  <div class="testPage_2">
    <h1>welcome to testPage_2</h1>
    <h1>'modules 模組化 以及 元件中引入 mapGetters、mapActions 和 mapStates的使用'</h1>
    <h1>{{this.$store.state.modA.numInMod}}</h1>
    <h1>{{textInMod}}</h1>
    <span v-for = 'list in getList'>{{list}} , </span><br>
    <!-- <h1>{{listGetters}}</h1> -->
    <input v-model="number"><button @click="pushList(number)">insert num</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapActions} from 'vuex';//優先引入
export default {
  name: 'testPage_1',
  data () {
    return {
      number : null
    }
  },
  computed:{
    ...mapState({  //這裡的...是超引用，ES6的語法，意思是state裡有多少屬性值我可以在這裡放多少屬性值
         textInMod:state=>state.modA.textInMod
      }),
    ...mapGetters('modA',[ //modA指的是modules模組,將模組的空間名稱字串作為第一個引數傳遞給上述函式，這樣所有繫結都會自動將該模組作為上下文。
         'getList' 
      ])
  },
  methods:{
    ...mapActions('modA',[//與vuex中的actions關聯
      'pushList'
    ])
  }
}
</script>
 

testPage_3.vue：

<template>
  <div class="testPage_3">
    <h1>welcome to testPage_1</h1>
    <h1>'使用map輔助函式的方法訪問store'</h1>
    
    <!-- <h1>{{text}}</h1> -->
    <!-- <button @click="addCount">+1</button> -->
    <!-- <input v-model="number"><button @click="addNumCount(number)">+n</button> -->
    <h1>count in mapState : {{count}}</h1>
    <h1>text in mapState : {{text}}</h1>
    <h1>getCount in mapGetters : {{getCount}}</h1>
    <h1>doneTodos in mapGetters : {{doneTodos}}</h1>
    <button @click="isShow">isShow</button>  <span v-if = 'this.$store.state.isShow'>isShow in actions ?</span>
    <h1>number : {{number}}</h1>


  </div>
</template>

<script>
import { mapState , mapGetters , mapActions} from 'vuex'  //必須引入
export default {
  name: 'testPage_3',
  data () {
    return {
      number:24,
    }
  },
  // ...mapState({   //使用...物件展開運算子
  //     count:state => state.count,
  //     text:state => state.text
  //   }),
  computed:{  
    ...mapState([       //更簡便的方法，注意這裡的'[]'，對映的計算屬性的名稱與 state 的子節點名稱相同時，對映 this.count 為 store.state.count
     'count','text'
    ]),
    ...mapGetters([ //使用...物件展開運算子
      'getCount','doneTodos'
    ])
  },
  methods: {
    ...mapActions([//與vuex中的actions關聯
      'isShow'
    ])
  }
}
</script>
 

index.js:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    
    // 在state中去宣告全域性變數，可以通過 this.$store.state 訪問
    state: {
        count: 0,
        text:'text',
        isShow:false,
        todos: [
          { id: 1, text: 'id=1,done=true', done: true },
          { id: 2, text: 'id=2,done=false', done: false }
        ]
    },
    // 在getters中宣告state中變數的計算函式，快取計算後的資料， 通過 this.$store.getters 呼叫
    getters: {
        getCount: state => {
            return state.count;        
        },
        doneTodos: state => {   //返回經過過濾處理的資料
            return state.todos.filter(todo => todo.done);
        },
        getTodoById: (state) => (id) => {   //根據傳入引數返回資料
            return state.todos.find(todo => todo.id === id);
        }
    },
    // 只能執行同步方法，不要去執行非同步方法 通過 this.$store.commit 方法去呼叫
    mutations: {
        // 改變state狀態的方法，不建議直接通過  
        // this.$store.state.? = ？的方式改變state中的狀態
        addCount: state => {
            state.count++;
        },
        // mutations的第一個引數即為 state物件，並且可以向mutation傳入額外的引數
        addNumCount: (state, n) => {
            state.count+=n;
        },
        isShow: state => {
            state.isShow = !state.isShow ;
        }
    },
    // 藉助actions的手去 執行 mutations ， 通過  this.$store.dispatch 的方式呼叫
    // 可以用來執行非同步操作，可以跟蹤非同步資料狀態變化
    actions: {
        addCount: context => {
            // 呼叫 mutation
            context.commit('addCount');
        },
        addNumCount: (context, n) => {
            context.commit('addNumCount', n);
        },
        isShow: context => {
            context.commit('isShow');
        }

    },
    modules:{
       modA : {
        namespaced:true,
        state: {
            numInMod:333,
            textInMod:'textInModules',
            list: [1,2,3]
        },
        getters: {
            getList: state => {
                return state.list;        
            }
        },
        mutations: {
            pushList: (state, items) => {
                state.list.push(items);
            },
        },
        actions: {
            pushList: (context, item) => {
                context.commit('pushList', item);
            }
        }
       }
    }
})