Vue3中Vuex的详细使用方法

下面是Vue3中Vuex的详细使用方法攻略。

什么是Vuex

Vuex是Vue.js中的状态管理模式，该模式中的核心是store(仓库)，store包含着状态(state)、更新状态的方法(mutations)和响应状态变化的方法(actions)。Vuex能够集中处理共享状态的逻辑，方便进行状态的修改和管理。

Vuex的安装和配置

在Vue3项目中，安装和配置Vuex可以按照以下步骤进行。

步骤1 安装

npm install vuex@next

步骤2 安装vuex的TypeScript支持

npm install --save-dev @typescript-eslint/eslint-plugin@latest eslint@latest eslint-plugin-vue@next eslint-config-prettier@8.3.0 eslint-plugin-prettier@3.4.0 prettier@2.3.0 vuex@next @vue/compiler-sfc@next @vue/eslint-config-typescript

步骤3 配置

在src目录下创建一个store目录，并在其中创建一个index.ts文件，该文件包含Vuex store的配置。

import { createStore } from 'vuex';

export default createStore({
  state: {
    // 状态
    count: 0
  },
  mutations: {
    // 更新状态的方法
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 响应状态变化的方法
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  modules: {}
});

步骤4 引入Vuex

在main.ts中引入Vuex并将store传递给app实例。

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app');

Vuex的使用

获取store中的状态

在Vue组件中，可以通过computed属性和mapState方法获取状态，示例代码如下。

<template>
  <div>{{ count }}</div>
</template>

<script lang="ts">
import { mapState } from 'vuex';

export default {
  computed: mapState(['count'])
};
</script>

更新store中的状态

在Vue组件中，可以通过mapMutations方法获取更新状态的方法，示例代码如下。

<template>
  <button @click="increment">increment</button>
</template>

<script lang="ts">
import { mapMutations } from 'vuex';

export default {
  methods: mapMutations(['increment'])
};
</script>

响应store中的状态变化

在Vue组件中，可以通过mapActions方法获取响应状态变化的方法，示例代码如下。

<template>
  <button @click="incrementAsync">incrementAsync</button>
</template>

<script lang="ts">
import { mapActions } from 'vuex';

export default {
  methods: mapActions(['incrementAsync'])
};
</script>