store.dispatch("setCity",route.query.cityName)
const xxx =store.getters.getCity
store文件
import { InjectionKey } from '@vue/runtime-core';
import { createStore, Store, useStore as baseUseStore } from 'vuex';
import settingsModule from './modules/Setting/index';
import appModule from './modules/app/index';
import messageModule from './modules/message/index'
import permissionModule from './modules/permission/index';
import tabModule from './modules/tabs/index'
import RootStateTypes, { AllStateTypes } from './types';
const defaultState = {
count: 0,
city:'mtt'
};
// 新建store 实例
export const store = createStore({
state() {
return defaultState;
},
mutations: {
increment(state: typeof defaultState) {
// eslint-disable-next-line no-plusplus
state.count++;
},
setCity(state: typeof defaultState, playload){
state.city=playload
}
},
actions: {
increment(context) {
context.commit('increment');
},
setCity(context,num) {
context.commit('setCity',num);
},
},
getters: {
count(state: typeof defaultState) {
return state.count;
},
getCity(state: typeof defaultState){
return state.city;
}
},
modules: {
settingsModule,
appModule,
messageModule,
permissionModule,
tabModule
},
});
export const key: InjectionKey<Store<RootStateTypes>> = Symbol('vue3-store');
export function useStore<T = AllStateTypes>() {
return baseUseStore<T>(key);
}
vuex的使用
最新推荐文章于 2024-10-04 00:46:18 发布
这篇文章介绍了如何在Vue应用中使用Vuex创建和管理store,涉及state、mutations、actions以及getters的使用,展示了如何通过`store.dispatch`和`store.getters.getCity`获取和设置城市信息。
摘要由CSDN通过智能技术生成