如何在 Vue3 中使用 Vuex？

terry 6小时前阅读数 10 #Vue

文章标签 Vuex

在 Vue3 项目开发中，Vuex 是一个非常实用的状态管理工具，那究竟该如何在 Vue3 中使用 Vuex 呢？下面就为大家详细介绍。

安装 Vuex

我们需要安装 Vuex，在项目的根目录下，打开终端，输入命令“npm install vuex@next --save”（这里的“@next”是因为 Vuex 适配 Vue3 的版本是 Vuex 4，在 npm 上发布时版本号以“next”标识），安装完成后,就可以在项目中引入使用了。

创建 Store

在项目的合适目录（一般是 src 目录下新建一个 store 文件夹），创建一个 index.js 文件（当然也可以根据项目结构命名其他合适的名字），在这个文件中，我们来创建 Store。

首先导入 createStore 函数,代码如下：

```javascript import { createStore } from 'vuex' ```

然后创建 Store 实例，

```javascript const store = createStore({ state() { return { // 这里定义状态，比如一个计数器 count: 0 } }, mutations: { // 定义修改状态的方法，比如增加计数器 increment(state) { state.count++ } }, actions: { // 定义异步操作或者更复杂的逻辑操作，比如异步增加计数器（虽然这里例子简单） asyncIncrement(context) { return new Promise((resolve) => { setTimeout(() => { context.commit('increment') resolve() }, 1000) }) } }, getters: { // 定义获取状态的计算属性，比如获取翻倍后的计数器值 doubleCount(state) { return state.count * 2 } } }) ```

这样一个基本的 Store 就创建好了。

在 Vue3 组件中使用

在 main.js（项目的入口文件）中，导入创建好的 Store，并将其注册到 Vue 应用中,代码如下：

```javascript import { createApp } from 'vue' import App from './App.vue' import store from './store' // 假设 Store 在 store 目录下的 index.js

const app = createApp(App) app.use(store) app.mount('#app')

<p>2. 在组件中访问 State</p>
<p>在 Vue3 的组件中（无论是选项式 API 还是组合式 API），都可以访问 Store 中的 State。</p>
<p>对于选项式 API，在组件的 computed 中使用，</p>
```javascript
export default {
    computed: {
        count() {
            return this.$store.state.count
        }
    }
}

对于组合式 API，在 setup 函数中，首先导入 useStore 函数，然后使用,代码如下：

```javascript import { useStore } from 'vuex' import { computed } from 'vue'

export default { setup() { const store = useStore() const count = computed(() => store.state.count) return { count } } }

<p>3. 在组件中提交 Mutation</p>
<p>选项式 API 中，在 methods 里提交，</p>
```javascript
export default {
    methods: {
        increment() {
            this.$store.commit('increment')
        }
    }
}

组合式 API 中，在 setup 函数里,代码如下：

```javascript import { useStore } from 'vuex'

export default { setup() { const store = useStore() const increment = () => { store.commit('increment') } return { increment } } }

<p>4. 在组件中分发 Action</p>
<p>选项式 API 中，在 methods 里分发，</p>
```javascript
export default {
    methods: {
        asyncIncrement() {
            this.$store.dispatch('asyncIncrement')
        }
    }
}

组合式 API 中，在 setup 函数里,代码如下：

```javascript import { useStore } from 'vuex'

export default { setup() { const store = useStore() const asyncIncrement = () => { store.dispatch('asyncIncrement') } return { asyncIncrement } } }

<p>5. 在组件中使用 Getter</p>
<p>选项式 API 中，在 computed 里使用，</p>
```javascript
export default {
    computed: {
        doubleCount() {
            return this.$store.getters.doubleCount
        }
    }
}

组合式 API 中，在 setup 函数里,代码如下：

```javascript import { useStore } from 'vuex' import { computed } from 'vue'

export default { setup() { const store = useStore() const doubleCount = computed(() => store.getters.doubleCount) return { doubleCount } } }


#### 四、模块化 Store（大型项目常用）
<p>当项目变得复杂时，Store 可以进行模块化，比如在 store 目录下新建一个 modules 文件夹，然后在里面创建各个模块的文件，user.js（假设是用户模块）。</p>
<p>user.js 文件内容示例：</p>
```javascript
const userModule = {
    namespaced: true, // 开启命名空间，避免模块之间的命名冲突
    state() {
        return {
            username: 'defaultUser'
        }
    },
    mutations: {
        updateUsername(state, newUsername) {
            state.username = newUsername
        }
    },
    actions: {
        asyncUpdateUsername(context, newUsername) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    context.commit('updateUsername', newUsername)
                    resolve()
                }, 1000)
            })
        }
    },
    getters: {
        getUsername(state) {
            return state.username
        }
    }
}
export default userModule

然后在 store 的 index.js 中导入并注册模块,代码如下：

```javascript import { createStore } from 'vuex' import userModule from './modules/user'

const store = createStore({ modules: { user: userModule } })

export default store

<p>在组件中访问模块里的内容时，选项式 API 中，比如访问 user 模块的 state：</p>
```javascript
export default {
    computed: {
        username() {
            return this.$store.state.user.username
        }
    }
}

组合式 API 中：

```javascript import { useStore } from 'vuex' import { computed } from 'vue'

export default { setup() { const store = useStore() const username = computed(() => store.state.user.username) return { username } } }

<p>提交模块的 mutation 时（选项式 API）：</p>
```javascript
export default {
    methods: {
        updateUsername(newUsername) {
            this.$store.commit('user/updateUsername', newUsername) // 模块名/ mutation 名
        }
    }
}

组合式 API 中：

```javascript import { useStore } from 'vuex'

export default { setup() { const store = useStore() const updateUsername = (newUsername) => { store.commit('user/updateUsername', newUsername) } return { updateUsername } } }


<p>分发模块的 action 以及使用模块的 getter 也是类似的方式，按照“模块名/ action 名”或“模块名/ getter 名”的格式来操作。</p>
#### 五、
<p>通过以上步骤，我们就可以在 Vue3 项目中熟练使用 Vuex 进行状态管理了，从安装、创建 Store、在组件中各种操作的使用，再到模块化 Store 以适应大型项目，Vuex 为 Vue3 项目提供了高效、便捷的状态管理方案，合理运用 Vuex 能让我们的项目代码结构更加清晰，维护起来也更加容易，特别是在多人协作开发大型项目时，其优势更加明显，希望大家通过这篇文章能更好地掌握 Vue3 中 Vuex 的使用，在项目开发中发挥出它的强大作用。</p>