Vuex

概念

Vuex 是一个专为vue.js应用程序开发的状态管理模式,说白了就是一个共享仓库

初始化

1. 下载vuex npm install vuex --save
2. 使用vuex 在src目录下新建store文件夹,在其下新建store.js,store.js就是存放我们vuex的

3. 在store.js中引入vue和vuex,并使用vuex

使用state(默认值)

初始state

state 里存放的就是货物,我们初始数据都是放在这里的

引用state

新建一个vue文件

注意点: 我们需要引入store.js,并注册使用,然后我们就可以通过$store.state.?来获取我们的初始数据,这时数据(状态)就可以展示出来了.

刚才那个获取数据太过繁杂,接下来我们可以使用下面几种方法来简化获取的方式.

1. 通过计算属性返回某个值
   页面显示

2. 通过computed:mapState([])获取,想要使用mapState,需要先引入进来,然后通过computed:mapState(['名'])可以引入与state子节点名称相同的,[

3. 通过对象展开运算符...mapState(['名'])获取,当局部计算属性也需要混合使用时,

Mutation (同步)改变值###

Mutation就是改变货物,改变状态和值,相当于事件注册,同时改变store中状态的唯一方法就是通过commit提交mutation

基本使用

我们在store.js中,定义一个mutations:{},里面写改变的规则

payload

$store.commit可以传入额定的参数即mutation得载荷(payload)

1. 直接传参数

2. 传入对象
   对象风格的提交

3. 使用...mapMutations在方法里调用...mapMutations,同样的要想使用需要先引入import { mapState ,mapMutations} from 'vuex',然后再使用,至于传参,只要遵守传参的定义就行

Action (异步)改变值

类似于mutation,不同的是Action提交的是mutation,而不是直接改状态,mutation像是事件注册,需要相应的触发条件,而Action就是管理触发条件的,

Action函数接收一个与store实例具有相同方法和属性的context对象,因此可以通过调用context.commit提交,通过context.state和context.getters来获取state和getters

使用

实践中,我们可以使用es2015的参数解构来简化代码,特别是需要commit多次

触发

通过$store.dispatch('名')触发

异步

通过上面的例子我们可以看到,当点击+号时,object会同时被打印出来,过两秒之后,数字变为5

使用辅助函数...mapAcion(['名'])在组件中分发

getter

定义一组数据

使用getter

使用

显示

页面显示

通过mapGetters使用

转载于:https://juejin.im/post/5b441a25e51d4519634f9849