Vue3中vuex的基本使用方法实例

本文将以「Vue3中vuex的基本使用方法实例」为主题，为大家详细讲解Vue3中vuex的使用方法和操作流程。

先决条件

Vue3和Vuex是本文所需使用的前置知识，如果你还不熟悉这两个技术，你需要先掌握它们。

安装 Vuex

首先，我们需要安装 Vuex 。您可以通过运行以下命令来安装该软件包：

npm install vuex@next

创建 Vuex 实例

现在，我们需要在我们的 Vue 应用程序中创建 Vuex 实例。可以在 src/store/index.js 中创建或者在任何你想要的位置创建该文件。

import { createStore } from 'vuex'

const store = createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

export default store

在该文件中，我们将初始状态加入到了state对象中，此外，我们还可以添加mutations方法以便更新状态，actions方法处理异步业务及modules 模块来处理组件拆分（分模块处理状态）。

实际上，这只是一个最原始的 Vuex 实例，可以根据应用程序的需求进行更改，现在，我们将学习如何使用它。

在 Vue 组件中使用 Vuex

现在，我们已经创建了一个 Vuex 实例，现在需要在Vue组件中使用它。

使用 state

我们拉起一个最简单的例子，在User.vue组件中使用Vuex：

<template>
  <div>
    <p>{{ user.firstName }}</p>
    <p>{{ user.lastName }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { mapState } from 'vuex'

export default defineComponent({
  name: 'User',

  computed: mapState(['user']),
})
</script>

可以看到在computed中，我们使用了mapState函数来连接vuex中的state。

使用 mutations

我们接下来演示在User.vue组件中使用mutations：

<template>
  <div>
    <p>{{ myCounter }}</p>
    <button @click="incrementCounter">Increment Counter</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { mapState, mapMutations } from 'vuex'

export default defineComponent({
  name: 'User',

  computed: {
    ...mapState(['myCounter']),
  },

  methods: {
    ...mapMutations(['incrementMyCounter']),
    incrementCounter() {
      this.incrementMyCounter()
    },
  },
})
</script>

可以看到，我们简单的向组件添加一个计数器，当点击按钮时更新计数器值。

Vuex就这样简单易用，可以让我们轻松处理Vue组件中的状态管理。这篇文章讲解了vuex的基本概念和使用方法，它们将为你管理更加复杂的状态交互打下基础。