vue3中使用js与ts使用mapState与mapGetters

在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提供额外的类型信息，以确保类型检查的准确性。