在 vuex 4.x 中使用`useStore` API

Question

1. 按照官方示例導出自己的useStore ，然后在組件中使用。

import { createStore, Store,  useStore as baseUseStore } from 'vuex';

export const key: InjectionKey<Store<RootState>> = Symbol();

export function useStore() {
  return baseUseStore(key);
}

在組件中使用

setup() {
  const store = useStore();
  const onClick = () => {
    console.log(store)
    store.dispatch('user/getUserInfo');
  }
  return {
    onClick,
  }
},

2. 運行后， store未定義。
3. 我在methods屬性中使用時可以正常獲取

methods: {
  login() {
    this.$store.dispatch('user/getToken')
  }
}

4. 為什么？ 如何修復它

Answer 1

在那個簡化useStore使用教程中，你仍然需要像他們一樣在main.ts中注冊store和key 。 如果您不這樣做，您將得到未定義：

// main.ts
import { store, key } from './store'

const app = createApp({ ... })

// pass the injection key
app.use(store, key)

原因是baseUseStore(key)在完成之前沒有任何意義。