各位,本期是根据我的开发经验和在逆战班的学习总结出的vuex使用技巧,接下来,让我们一起学习vuex:
#介绍:
Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex背后的基本思想,就是单向数据流。下图就是Vuex实现单向数据流的示意图。
首先,安装 :
Vue项目中使用 npm 下载安装(需要安装 Node 环境)
npm install vuex --save
// 安装使用
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
接下来,我们将会更深入地探讨一些核心概念。让我们先从Store概念开始。
##Store
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state) 。
安装 Vuex 之后,让我们来创建一个最简单的 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation:
现在,你可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:
由于 store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutation。
##State
Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:
##Getter
有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数:
如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。
Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
Getter 会暴露为 store.getters 对象:
#Mutation
Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,payload作为第二个参数(额外的参数):
一条重要的原则就是要记住 mutation 必须是同步函数。
##Action
Action 类似于 mutation,不同在于:
1.Action 提交的是 mutation,而不是直接变更状态。
2.Action 可以包含任意异步操作。
接下来注册一个简单的 action:
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
我们可以在 action 内部执行异步操作:
#在vue中使用vuex:
在store中的index.js中引入vuex并配置如下,在modules中引入子文件
在main中引入store
在vue文件中使用vuex
1.从vuex中引入相关状态
2.按照相应路径取出对应属性
在html中属性可以直接使用,如果要在js中使用属性,属性前面加this
对于发送ajax请求:
在对应的module中配置好方法
在vue文件中直接调用全局方法:
好了,各位小伙伴,本期的分享就到这了
作者:类维松