vuex笔记

一. 什么是Vuex?

Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.

二.如何引入Vuex?

下载vuex: npm install vuex --save

在main.js添加:

三. Vuex的核心概念?

这个demo分别有两个组件ProductListOne.vue和ProductListTwo.vue, 在App.vue的datat中保存着共有的商品列表, 代码和初始化的效果如下图所示:

核心概念1: State

state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

此时我们就可以把App.vue中的两个组件共同使用的data抽离出来, 放到state中,代码如下:

此时,ProductListOne.vue和ProductListTwo.vue也需要做相应的更改

此时的页面如下图所示, 可以看到, 将公共数据抽离出来后, 页面没有发生变化.

核心概念2: Getters

我将getters属性理解为所有组件的computed属性, 也就是计算属性.

vuex的官方文档也是说到可以将getter理解为store的计算属性,

getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

此时,我们可以在main.js中添加一个getters属性,其中的saleProducts对象将state中的价格减少一半(除以2)

将productListOne.vue中的products的值更换为this.$store.getters.saleProducts

现在的页面中,Product List One中的每项商品的价格都减少了一半

核心概念3: Mutations

我将mutaions理解为store中的methods,

mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.

下面,我们在main.js中添加mutations属性,其中minusPrice这个回调函数用于将商品的价格减少payload这么多, 代码如下:

在ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPrice方法

在ProductListTwo.vue中注册minusPrice方法, 在该方法中commitmutations中的minusPrice这个回调函数

注意:调用mutaions中回调函数, 只能使用store.commit(type, payload)

添加按钮, 可以发现, Product List Two中的价格减少了2, 当然你可以自定义payload,以此自定义减少对应的价格.

(Product List One中的价格没有发生变化，原因是getter 监听的是map方法产生的新对象)

核心概念4: Actions

actions 类似于 mutations，不同在于：

actions提交的是mutations而不是直接变更状态

actions中可以包含异步操作, mutations中绝对不允许出现异步

actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象

此时,我们在store中添加actions属性,其中minusPriceAsync采用setTimeout来模拟异步操作,延迟2s执行

该方法用于异步改变我们刚才在mutaions中定义的minusPrice

在ProductListTwo.vue中添加一个按钮,为其添加一个点击事件, 给点击事件触发minusPriceAsync方法

在ProductListTwo.vue中注册minusPriceAsync方法, 在该方法中dispatchactions中的minusPriceAsync这个回调函数

添加按钮, 可以发现, Product List Two中的价格延迟2s后减少了5

核心概念5: Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割