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解构