TypeScript中的Vuex映射函数

// store.ts
import { createStore } from 'vuex';

interface State {
  count: number;
}

const store = createStore<State>({
  state() {
    return {
      count: 0,
    };
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

export default store;

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { mapState, mapActions } from 'vuex';

export default defineComponent({
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapActions(['increment']),
  },
});
</script>

import { mapState, mapActions } from 'vuex';

export default defineComponent({
  computed: {
    ...mapState('moduleName', ['count']), // 如果使用了命名空间，需要指定模块名
  },
  methods: {
    ...mapActions('moduleName', ['increment']), // 如果使用了命名空间，需要指定模块名
  },
});

// store.ts
interface State {
  count: number;
}

const store = createStore<State>({
  state() {
    return {
      count: 0,
    };
  },
  // ...
});

export default store;

// 组件中
import { mapState, mapActions } from 'vuex';
import { RootState } from './store'; // 假设你有一个 RootState 类型定义

export default defineComponent({
  computed: {
    ...mapState<RootState, 'count'>('moduleName', ['count']),
  },
  methods: {
    ...mapActions<RootState, 'increment'>('moduleName', ['increment']),
  },
});