Vue3+TS在CompositionAPI下使用Vuex4

虽然在Vue3中可以使用Provide/Inject来实现超远距离变量传送，但是只是祖父组件给子组件传送。
如果要全局的进行变量、状态管理，还是要使用到Vuex。
针对Vue3的话版本就要升级到Vuex4。

先进行包的安装。注意针对Vue3的版本，vuex-composition-helpers需要安装next版本。

$ npm install vuex@next -S
$ npm install vuex-composition-helpers@next -S

目录结构

└── store
    └── index.ts
└── main.ts

代码

在代码实现方式上，也有很大的不一样，如下所示：

index.ts

import { InjectionKey } from 'vue';
import { ActionTree, createStore, GetterTree, MutationTree, Store, StoreOptions } from 'vuex';

// Declare state struct
declare interface globalStore {
  fakeName: string;
}

// Define All params of StoreOptions
const globalStoreState: globalStore = {
  fakeName: 'Fake Name',
};

const globalStoreGetters: GetterTree<globalStore, any> = {
  fakeName: (state) => state.fakeName,
};

const globalStoreMutations: MutationTree<globalStore> = {
  UPDATE_FAKE_NAME(state, payload) {
    state.fakeName = payload;
  },
};

const globalStoreActions: ActionTree<globalStore, any> = {
  updateFakeName({ commit }, payload) {
    commit('UPDATE_FAKE_NAME', payload);
  },
};

// Define StoreOptions
const globalStoreOption: StoreOptions<globalStore> = {
  state: globalStoreState,
  getters: globalStoreGetters,
  mutations: globalStoreMutations,
  actions: globalStoreActions,
};

// Defind current store key
export const globalStoreKey: InjectionKey<Store<globalStore>> = Symbol();

export default createStore<globalStore>(globalStoreOption);

main.ts

import { createApp } from 'vue';
import App from './App.vue';

import store, { globalStoreKey } from './store';

const app = createApp(App);
// use store
app.use(store, globalStoreKey);

app.mount('#app');

component.vue

<template>
   <p>{{ fakeName }}</p>
</template>
<script lang="ts">
import { defineComponent, inject, reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { globalStoreKey } from '../store';
import { useState, useActions } from 'vuex-composition-helpers';

export default defineComponent({
    setup() {
       // 通过key拿到特定的store
       const store = useStore(globalStoreKey);
       // 这里的 useActions 类似之前vuex的mapActions
       const { updateFakeName } = useActions(store, ['updateFakeName']);

       return  {
           // 这里的 useState 类似之前vuex的 mapGetters
           ...useState(store, ['fakeName']),
       }
    }
})
</script>