Использование `useStore` API с vuex 4.x

#javascript #vue-component #vuex #vuejs3 #vue-composition-api

#javascript #vue-компонент #vuex #vuejs3 #vue-composition-api

Вопрос:

  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,
  }
},
 
  1. После запуска store не определено.
  2. Его можно получить обычным способом, когда я использую его в methods атрибуте
 methods: {
  login() {
    this.$store.dispatch('user/getToken')
  }
}
 
  1. почему? как это исправить

Ответ №1:

В этом руководстве по упрощению useStore использования вам все равно нужно зарегистрировать store и key в main.ts, как они это делали. Вы получите undefined, если не сделаете этого:

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

const app = createApp({ ... })

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

Причина в том, что baseUseStore(key) это не имеет смысла, пока это не будет сделано.