Vue3.js - 一文看懂Vuex

1. 前言

Vuex 是 Vue.js 的官方状态管理库，用于在 Vue 应用中管理组件之间共享的状态。Vuex 适用于中大型应用，它将组件的共享状态集中管理，可以避免组件间传递 props 或事件的复杂性。

2. 核心概念

我们可以将Vuex想象为一个大型的Vue，存储在Vuex中的数据，方法无论在任何组件中我们都可以使用，调用，修改

Vuex中的核心组件包括不仅限于以下部分：

State（状态）：存储应用的状态数据。
Getters（获取器）：可以视图化 state，类似于 Vue 组件中的计算属性，用于获取 state 的值并进行加工。
Mutations（变更）：同步修改 state 的方法。唯一能直接修改 state 的地方。
Actions（行为）：用于处理异步操作，类似于 mutations，但可以包含异步代码，最终通过 mutations 更新 state。
Modules（模块化）：当应用状态变得复杂时，可以将 Vuex store 分割成模块，每个模块拥有自己的 state、mutations、actions 和 getters。

3. Vuex的安装

npm install vuex@next
# or
yarn add vuex@next

如果可以指定vuex安装的版本，目前最新版本为vuex4

4. 创建vuex

我们常见于在工程项目中单独使用一个文件夹存放我们的vuex脚本

在src中新建一个store文件夹创建一个js脚本，开始我们创建vuex的第一步

import {createStore} from 'vuex'
const store = createstore({})

导入vuex中的createstore函数，为其配置相应的对象变量

4.1 state 状态

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

上述代码中为store配置了state，state中存储我们的“全局数据”count赋值为0，在其他组件中我们可以调用查看我们的count

4.2 mutations 变更

const store = createStore({state:{count:0},mutations:{increment(state,value){xxxx}}
})

唯一可以直接修改state的地方

上述代码配置了mutations组件，类比于vue中的methods，mutations中包装了若干个函数，可以为函数传入state组件，便可以访问以及操作state中存储的数据；value则是想要传入的数据。

mutations 存储的函数也是全局的，任意组件都可以进行调用

4.3 getter 获取器

const store = createStore({state:{count:0},mutations:{},getters:{count10(state){return state.count+10}}
})

类比于vue中的computed属性，返回一个操作之后的全局数值

4.4 actions 行为

用于处理异步操作，类似于 mutations，但可以包含异步代码，最终通过 mutations 更新 state

actions: {asyncIncrement({ commit }) {setTimeout(() => {commit('increment');}, 1000);}},

5. vue中使用vuex

5.1 vue注册

需要在应用中注册 Vuex store。在 main.js 文件中导入并使用 Vuex store：

//main.js文件
import {createApp} from 'vue'
import App from './App.vue'
import {store} from './store/index.js'app = createApp(App) //创建vue，并将App组件传入
app.use(store) //让我们的app这个vue组件使用vuex组件
app.mount('#app') //挂载到html文件中

5.2 在组件中访问vuex

在 Vue 组件中通过 this.$store 访问 Vuex store。例如，在模板中访问 count 和 doubledCount，并触发 mutations 和 actions。

通常使用$标识符代表使用vue上的实例的全局组件。

<template><div><p>Count: {{ count }}</p><p>Doubled Count: {{ doubledCount }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button><button @click="asyncIncrement">Async Increment</button></div>
</template><script>
export default {computed: {// 通过 getter 获取状态count() {return this.$store.state.count;},doubledCount() {return this.$store.getters.doubledCount;}},methods: {// 触发 mutationsincrement() {this.$store.commit('increment');},decrement() {this.$store.commit('decrement');},// 触发 actionsasyncIncrement() {this.$store.dispatch('asyncIncrement');}}
};
</script>

6. modules

当应用变得较为复杂时，你可以通过模块化来管理 store。每个模块可以拥有自己的 state、mutations、actions 和 getters，从而更好地组织代码。

与vue类似，创建不同的vuex组件(module)，最后使用一个大的框架组件将其他模块进行涵盖

// store/modules/user.js
export default {state: {name: 'John Doe'},mutations: {setName(state, name) {state.name = name;}},actions: {updateName({ commit }, name) {commit('setName', name);}},getters: {userName(state) {return state.name;}}
};

// store/modules/cart.js
export default {state: {items: []},mutations: {addItem(state, item) {state.items.push(item);}},actions: {addItemToCart({ commit }, item) {commit('addItem', item);}},getters: {cartItems(state) {return state.items;}}
};

最后在总组件中配置modules，使用modules进行配置

// store.js
import { createStore } from 'vuex';
import user from './modules/user';
import cart from './modules/cart';const store = createStore({modules: {user,cart}
});export default store;