store文件下目錄

index.ts
state.ts
mutation-types.ts
mutations.ts
getters.ts
actions.ts

文件

index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

state.ts（唯一數據源，包含全部應用層級的狀態）

/* 優先從本地獲取 */
let user = localStorage['user'];
/* 共享數據 */
const state = {
    name:"測試",
    count:1,
    user: user ? JSON.parse(user) : { name: '個人中心'},
    list: {},
}
export default state;

mutation-types.ts（定義常量暴露出去）

export const SET_ADD_COUNT = 'SET_ADD_COUNT'
export const SET_REMOVE_COUNT = 'SET_REMOVE_COUNT'

mutations.ts（提交 mutation，更改 Vuex 的 state 中的數據狀態，接收state作為第一個參數）

import * as TYPES from './mutation-types'
const mutations = {
    [TYPES.SET_ADD_COUNT](state: { count: number; },data: number){
        if(data){
            state.count += data;
        }else{
            state.count++;
        }
    },
    [TYPES.SET_REMOVE_COUNT](state: { count: number; },data: number){
        if(data){
            state.count -= data;
        }else{
            state.count--;
        }
    }
}
export default mutations;

getters.ts（從store 中的 state 中派生出一些狀態 ，暴露為 store.getters 對象）

const getters = {
    _user:function(state: { user: any; }){
        return state.user;
    },
    _list: function(state: { list: any; }){
        return state.list
    },
    _getCount:function(state: { count: number; }){
        return state.count + 10;
    }
}

export default getters;

actions.ts（Action 提交 mutation，執行異步操作）

import * as TYPES from './mutation-types'

const actions = {
    [TYPES.SET_ADD_COUNT](context: { commit: (arg0: string, arg1: any) => void; },val: any){
        context.commit(TYPES.SET_ADD_COUNT,val);
    },
    [TYPES.SET_REMOVE_COUNT](context: { commit: (arg0: string, arg1: any) => void; },val: any){
        context.commit(TYPES.SET_REMOVE_COUNT,val);
    }
}

export default actions;

頁面引入

<template>
  <div class="home">
    我是從頁面直接獲取的值：{{this.$store.state}}
    <p>--------------------------------------</p>
    我是從getters中獲取的值：{{$store.getters}}
    <p>--------------------------------------</p>
    我是從mapState中獲取的值：{{message}}
    <p>--------------------------------------</p>
    我是從mapGetters中獲取的值：{{_getCount}}
    <p>--------------------------------------</p>
    <div>
      <button @click="handelAddCount">add count</button>
      <button @click="handelRemoveCount">remove count</button>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
/* mapState、mapGetters、mapActions輔助函數 */
import {mapState,mapGetters,mapActions} from 'vuex'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  computed:{
    ...mapState({
      message: state => state.count + 3
    }),
    ...mapGetters(['_getCount']),
  },
  methods:{
    handelAddCount(){
      /* 提交（異步）actions */
      this.$store.dispatch('SET_ADD_COUNT',10);
      /* 提交（同步）mutations */
      // this.$store.commit('SET_ADD_COUNT');
    },
    handelRemoveCount(){
      /* 提交（異步）actions */
      // this.$store.dispatch('SET_REMOVE_COUNT',4);
      /* 提交（同步）mutations */
      // this.$store.commit('SET_REMOVE_COUNT');
      /* 調用 */
      this.SET_REMOVE_COUNT();
    },
    //mapActions 使用方法一
    ...mapActions(['SET_REMOVE_COUNT']),
    //mapActions 使用方法二
    /* ...mapActions({
        SET_REMOVE_COUNT: "SET_REMOVE_COUNT"
    }) */
  }
}
</script>

_20200401140837.png