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;
7. 总结
总的来说，vuex是处理状态管理的一个强大工具。
在较大型项目中避免重复持续的使用事件配置以及props进行处理组件之间的数据
Vuex 在 Vue 3 中依然是响应式的。这意味着，当 Vuex 中的 state 被改变时，所有依赖该 state 的组件会自动重新渲染，确保 UI 始终与 state 保持同步。