vuex状态管理

• List item

vuex简介

Vuex 是专为vue.js开发的一个公共状态管理工具，通过创建一个集中的数据存储，方便程序中的所有组件进行访问。Vuex 也集成了 Vue 的 devtools extension…等官方调试工具,对使用vuex管理的状态以及数据进行实时监测，也方便了我们对代码的调试。

使用场景

传统vue是单向数据流。如果是兄弟组件之间传值兄弟组件间的状态传递无能为力
我们经常会采用父子组件通过正向/逆向传值来对数据进行传递。以上的这些模式非常脆弱，通常会导致无法维护的代码。

安装vuex：

npm install vuex --save

配置vuex：

1、配置vuex文件创建在src中创建store文件夹–>与store.js

2、创建store实例：（注：每个应用只能有一个store实例）

3、要使用首先在main.js引入vuex。
一对大括号的原因是，指定要从其他模块导入的变量名。

a . vuex–State(唯一状态/数据源)

1、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data

2、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

a-1. vuex–State的使用

在需要使用数据的组件中使用计算属性调用 this.$store.state.xxx

b. vuex–Mutations（同步修改数据）

1、mutations,里面装着一些改变数据方法的集合，就是把处理数据逻辑方法全部放在mutations里面（当触发事件的时候想改变state数据的时候使用mutations）

2、在实际项目中往往会有值传递给Mutations 给store.commit传一个附加参数，他就叫做mutation的载荷
（注：形参state为数据源，payload为接收的参数）

b-1. vuex–Mutations的调用

1、不能直接调用一个 mutations 中的处理函数 要使用this.$store.commit() 来进行调用。

2、支持调用时传参

c. vuex-Actions（调用Mutations的异步机制）

1、Actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）
2、Actions 类似于 mutation，但是Actions 提交的是 mutation，而不是直接变更状态。Actions 可以异步操作。

3、Action同样支持载荷
（注：形参context为store实例，payload为接收的参数）

c-1. vuex-Actions异步机制的调用

1、分发 Action：Action 通过 this.$store.dispatch(“xxxx”);方法触发

2、支持调用时传参

d. vuex–axios

（一般需要共享的数据放在vuex异步来执行）

1、需要共享数据的页面调用vuex异步actions内的函数

2、创建actions的异步函数并发出axios请求，将请求到的发送给mutions内函数

3、创建mutions的函数对state的变量进行赋值修改存储

4、设置state的变量用来存储请求来的数据

e. vuex–Getters（vuex中的计算属性）

1、getters相当于之前组件中学习的计算属性,getters属性主要是对于state中数据的一种过滤
2、使用场景：在项目开发中，有时候希望对state中的某个属性在多个组件中展示出不同状态

e-1. vuex–Getters的使用

与使用state相同在组件中的计算属性当中使用 this.$store.getters.xxx来进行调用

需要注意的问题

1、vuex中页面刷新数据丢失问题
使用vue进行开发的过程中，状态管理工具一般使用vuex进行管理。但是修改后的vuex数据存储在内存中，所以当前页面刷新数据会产生丢失现象
解决：
a. 使用H5特性本地存储
b. vuex持久化

、页面获取vuex数据和调用复杂和 vuex状态混乱
使用模块分割 和 map解构