Vuex

Vuex

Vuex是Vue.js官方提供的状态管理库，它借鉴了Flux和Redux的设计思想，将应用的状态（state）集中管理于单个全局状态树中。

核心概念

• State：存储应用程序的状态
• Getters：允许在Vuex store中定义计算属性，从state中派生出一些状态。
• Mutations：唯一允许修改状态的地方，每个mutation都有一个字符串类型的事件类型（type）和一个回调函数（handler），它们接受state作为第一个参数。
• Actions：类似于mutations，但不同之处在于它们提交的是mutations，而不是直接变更状态。Actions可以包含任意异步操作，是处理异步逻辑的好地方。

工作原理

Vuex通过一种响应式的方式来管理状态的变化，配合Vue.js的单向数据流，使得状态的变化可以被追踪和调试。

特性

集中管理状态，使得状态管理更加清晰和可维护。

支持模块化，可以将store分割成多个模块，每个模块拥有自己的state、getters、mutations、actions，提高代码的可读性和可维护性。

提供了严格模式，可以帮助检测state的变更是否来源于mutation。

适用场景

适用于大型、复杂的Vue.js应用程序，特别是需要集中管理大量状态、处理复杂状态逻辑或需要插件集成的场景。

Vue2中使用Vuex

安装Vuex
npm install vuex –save
一键获取完整项目代码
yarn add vuex
一键获取完整项目代码
2.创建vuex仓库，在src目录下新建store文件夹，并新建一个js文件

// store/index.js
import Vue from ‘vue’;
import Vuex from ‘vuex’;

Vue.use(Vuex);

export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++;
},
decrement (state) {
state.count–;
}
},
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit(‘increment’);
}, 1000);
}
},
getters: {
doubleCount: state => state.count * 2
}
});
一键获取完整项目代码
javascript

3.在main.js将store注册到全局组件中

import Vue from ‘vue’
import App from ‘./App.vue’
import store from ‘./store’

Vue.config.productionTip = false

new Vue({ //实例
store, //仓库挂载
render: h => h(App),
}).$mount(‘#app’)

一键获取完整项目代码
javascript

4.在子组件中使用store里调用store的数据和方法,用helper函数进行映射能更加简洁的使用store的属性方法，为什么this.$store会指向仓库，因为在vue2中this指向当前实例，但是我们在main.js中只new了一个vue实例App，然后我们又把仓库挂载到了实例上，以后导入更多的东西比如vue-router之类的也可以通过this.$router指向挂载在实例上的router.

//使用vuex中的函数mapState, mapMutations, mapActions, mapGetters进行映射，映射后可以直接调用store里的属性方法
//那如果不使用help函数映射，将会长这个样子

一键获取完整项目代码
javascript

5.在父组件中导入子组件

一键获取完整项目代码
javascript

测试页面

总结：Vuex的四大核心概念state-存数据，getters-存要通过计算的数据，mutation存同步变更数据的方法，actions存异步调用mutation方法变更数据的方法，仓库创建完后挂载到全局组件中，在组件中使用store时，需要export default，state和getters数据要写在computed计算属性里面，mutations和actions要写在methods里面。当然核心概念里面还有一个module（并不是用很多就不讲太深了），然后我们要创建使用多个仓库时，要把仓库模块化比如这种情况我们需要在store里面创建一个module文件夹，然后把要创建的仓库全部放进去，不用再import什么vuex，直接export就行，然后要在模块化组件开启命名空间，再统一导入到index.js里面的modules里面

————————————————
版权声明：本文为CSDN博主「超绝前端乱学小白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/2301_76607771/article/details/142927648