Vuex4 TypeScript Api使用指南，在Vue3实战应用案例

createStore<S> 函数用于创建一个新的 Vuex store。它接受一个参数，即 store 的状态类型。

const store = createStore({
  state: {
    count: 0
  }
});

createAction

createAction 函数用于创建一个新的 action。它接受两个参数：action 的类型和 action 的处理函数。

const increment = createAction('increment', (state) => {
  state.count++
});

createMutation

createMutation 函数用于创建一个新的 mutation。它接受两个参数：mutation 的类型和 mutation 的处理函数。

const increment = createMutation('increment', (state) => {
  state.count++
});

createGetter

createGetter 函数用于创建一个新的 getter。它接受两个参数：getter 的类型和 getter 的处理函数。

const getCount = createGetter('getCount', (state) => {
  return state.count
});

在 Vue3 中使用 Vuex4

要将 Vuex4 与 Vue3 一起使用，你需要安装 vuex 和 @vue/composition-api。

npm install vuex @vue/composition-api

然后，你需要在你的 Vue3 项目中创建一个 Vuex store。你可以使用 createStore 函数来做到这一点。

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

接下来，你需要在你的 Vue3 组件中使用 Vuex store。你可以使用 useStore 钩子来做到这一点。

import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    return {
      count: store.state.count,
      increment: store.commit('increment')
    }
  }
}

结语

在本文中，我们介绍了 TypeScript 类型的 Vuex4 中的一些 Api，并编写了一个 Vue3 + TypeScript 使用 Vuex4 的案例。希望这些内容对你有帮助。