前三章陆续已经更新了Vue基本使用 和Vue Router的基本使用,如果你读了前三篇文章的话,并且掌握差不多,那么你现在可以开发简单的应用了,例如Blog,电商网站…唯一不足的是,随着你的业务需求不断增加,页面中的状态数据也不断庞大,维护起来就特别困难了,Vue 提供了一种状态管理 解决办法 -Vuex,它的思想和React 的Redux 很像,页面中的数据和逻辑都交给了store来管理了,这样的好处就是,维护方便,单个组件代码也整洁不少。
到此,Vue 系列文章就结束了,Vue 全家桶已经讲完了,如果你跟着读了这前几篇文章的话,你现在就可以实操的写一个项目来体验一下Vue的魅力。Vue 使用熟练可以了的话,下一步你应该进阶更高一层了,那就是研究Vue 源码。只有清楚原理了,自己造轮子玩那才有意思,对应你的money 也提高了,lavel 也 提升了,加油吧, 小伙伴们。
Vuex
安装
npm install vuex --saveyarn add vuex// Vuex 依赖 Promise,所有需要安装 es6-promisenpm install es6-promise --save yarn add es6-promise
Vuex 介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
store.js
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { count: 0, message: '测试信息' }, mutations: { }, actions: { }, modules: { }})
State ------>驱动应用的数据源
1.在组件中 获取store 中的state 数据
1. 在组件中 获取store 中的state 数据 // 一般是 通过计算属性中声明属性,然后使用 this.$store.state.数据源 来获取数据的 computed: { count () { return store.state.count } }
如何获取多个state呢?
如果想获取多个state数据呢,其实可以在computed 中写多个属性 来获取state,但是当state变化时,会重新求取计算属性,并且触发更新相关联的 DOM,非常影响性能。
好在Vuex 提供了
mapState
辅助函数,减少不必要的开销
1. 首先第一步 必须引入 mapState import { mapState } from 'vuex'2. 在computed 使用即可computed: mapState({ counts: state => state.count, //counts为自定义的属性: state参数 是stote中的state,然后直接通过state。数据源获取即可 addNumber (state) { return this.numbers + state.count } })3. 在页面 直接使用 自定义的属性
Getter
作用类似 computed,但有缓存功能。
使用场景: 当一个组件需要过滤后的state值,你可以在组件中通过filter进行过滤,那么其它组件也需要过滤后的值,你就的再 次过滤state。
当使用getter 处理后,一次处理,多次使用,提高效率
export default new Vuex.Store({ state: { count: 0, message: '测试信息', arr: [1, 2, 3, 4, 5, 6] }, getters: { filterArr: state => { return state.arr.filter(items => items % 2 === 0) } }})
mapGetters
辅助函数
mapGetters
辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:
在组件中访问getter 值
this.$store.getters.自定义的属性在 其它 组件访问该getters 时,值仍然时 [ 2, 4, 6 ] 过滤后的
Mutation
Mutation 是用来更改Store的状态的唯一方法。
它由 事件类型 和 回调函数构成。回调函数是用来更改state状态的,参数为state
使用mutation:
- 必须在 mutation中注册事件,
- 然后在组件中通过
store.commit(事件名)
来 触发改变state的状态注意:
store.commit 参数
store.commit 接收两个参数
第一个参数为: store.mutation中的事件名
第二个参数为: 要传递的 载荷
mutations: { increment (state, n) { state.count += n }}store.commit('increment', 10)
mapMutations
辅助函数
mapMutations
辅助函数将组件中的 methods 映射为store.commit
调用(需要在根节点注入store
)。
对象的提交方式
mutations: { increment (state, payload) { state.count += payload.amount }}mutations: { increment (state, payload) { state.count += payload.amount }}store.commit({ type: 'increment', amount: 10})
Mutation 使用技巧
在多人协作开发时,随着 mutation 的 type 增多,会维护困难。
官方推荐采用 使用 事件类型,来处理,开发效率提高。
// mutation-types.jsexport const SOME_MUTATION = 'SOME_MUTATION'// store.jsimport Vuex from 'vuex'import { SOME_MUTATION } from './mutation-types'const store = new Vuex.Store({ state: { ... }, mutations: { // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名 [SOME_MUTATION] (state) { // mutate state } }})
Action
Action 功能类似 Mutation,
Action 支持 异步操作
Action 提交的 mutation, 不是直接修改state状态
Action 接收参数: 与 store 实例具有相同方法和属性的 context 对象
实例
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } }})
在组件中分发Action
this.$store.dispatch('xxx')
异步执行Action
actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) }}
mapActions
辅助函数
Action 也支持载荷
// 以载荷形式分发store.dispatch('incrementAsync', { amount: 10})// 以对象形式分发store.dispatch({ type: 'incrementAsync', amount: 10})
Module 模块分割
当所有状态对象都集中在个大的对象中,store维护将变得困难。这时,可以使用模块分割成多个对象,最后将对象挂载到store的modeule中,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... }}const moduleB = { state: { ... }, mutations: { ... }, actions: { ... }}const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB }})store.state.a // -> moduleA 的状态store.state.b // -> moduleB 的状态
✨觉得不错的点赞,帮忙转发分享以下,原创不易!
### ✨关注微信公众号’前端自学社区’ 获取更多资料
### 💥回复加群 可以加入 自学前端群💥
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: HaiJun 原文链接:https://juejin.im/post/6844904110215397390