雖然在Vue3中可以使用Provide/Inject來(lái)實(shí)現(xiàn)超遠(yuǎn)距離變量傳送，但是只是祖父組件給子組件傳送。
如果要全局的進(jìn)行變量、狀態(tài)管理，還是要使用到Vuex。
針對(duì)Vue3的話(huà)版本就要升級(jí)到Vuex4。

先進(jìn)行包的安裝。注意針對(duì)Vue3的版本，vuex-composition-helpers需要安裝next版本。

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

目錄結(jié)構(gòu)

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

代碼

在代碼實(shí)現(xiàn)方式上，也有很大的不一樣，如下所示：

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() {
       // 通過(guò)key拿到特定的store
       const store = useStore(globalStoreKey);
       // 這里的 useActions 類(lèi)似之前vuex的mapActions
       const { updateFakeName } = useActions(store, ['updateFakeName']);

       return  {
           // 這里的 useState 類(lèi)似之前vuex的 mapGetters
           ...useState(store, ['fakeName']),
       }
    }
})
</script>