#javascript #vue-component #vuex #vuejs3 #vue-composition-api
#javascript #vue-компонент #vuex #vuejs3 #vue-composition-api
Вопрос:
- Следуйте официальному примеру, чтобы экспортировать свой собственный
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,
}
},
- После запуска
store
не определено. - Его можно получить обычным способом, когда я использую его в
methods
атрибуте
methods: {
login() {
this.$store.dispatch('user/getToken')
}
}
- почему? как это исправить
Ответ №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)
это не имеет смысла, пока это не будет сделано.