在Vue 3中，你可以使用JavaScript或TypeScript结合mapState和mapGetters来简化组件中的状态访问。以下是如何使用它们的示例：
首先，确保你已经在Vuex中定义了state和getters。
// store.js
import { createStore } from 'vuex';
export default createStore({
state() {
return {
count: 0,
};
},
getters: {
doubleCount(state) {
return state.count * 2;
},
},
});
然后，在你的Vue 3组件中，你可以这样使用mapState和mapGetters：
// MyComponent.vue (JavaScript)
import { computed } from 'vue';
import { useStore } from 'vuex';
import { mapState, mapGetters } from 'vuex';
export default {
setup() {
const store = useStore();
// 使用mapState生成计算属性
const { count } = mapState({ count: (state) => state.count });
// 使用mapGetters生成计算属性
const { doubleCount } = mapGetters(['doubleCount']);
// 返回响应式数据和方法
return {
count,
doubleCount,
};
},
};
如果你使用TypeScript，可能需要为状态和getters提供类型定义：
// store.ts
import { createStore } from 'vuex';
export interface State {
count: number;
}
export interface Getters {
doubleCount: (state: State) => number;
}
export default createStore<State>({
state() {
return {
count: 0,
};
},
getters: {
doubleCount: (state: State): number => state.count * 2,
},
});
// MyComponent.vue (TypeScript)
import { computed } from 'vue';
import { useStore } from 'vuex';
import { mapState, mapGetters } from 'vuex';
import { State, Getters } from './store';
export default {
setup() {
const store = useStore();
// 使用mapState生成计算属性并提供类型
const { count } = mapState<State>({ count: (state) => state.count });
// 使用mapGetters生成计算属性并提供类型
const { doubleCount } = mapGetters<Getters>({ doubleCount: 'doubleCount' });
return {
count,
doubleCount,
};
},
};
请注意，在TypeScript中，你可能需要为state和getters提供额外的类型信息，以确保类型检查的准确性。