第一章 初识vuex
vuex有什么用?
比如, vue做了一个音乐app, 里面的播放组件, 这组件应该是在所有的页面都有用到的.
希望在所有的页面都能控制播放器的 暂停/播放, 或者说都可以选择是否 随便播放/单曲循环.
这就涉及到了多组件之间的传参,而且是非常复杂的传参.这时候使用vuex是合适的.
vuex是什么?
通过简单的描述, 我们大概可以理解为vuex是一个公共 状态库 , 你可以在所有的组件里面去使用,修改
那这个状态库是由什么组成的?
一. state: 最最基本的状态
const store = new Vuex.Store({ state: { count: 0 } ... })
二. getters: 相当于计算属性
当我们得到state的值之后, 使用getters, 将这些基本的值进行组合加工, 得到我们需要的值
三. mutations:
他的作用就是来改变state的值, 并且是唯一的方法
四. actions:
假如你有好几个mutation需要提交, 一个一个的写就太傻逼了. 可以用 actions 来封装 mutations.
第二章 vuex核心概念详解
1. state的运用
a. 最简单的方法就是在计算属性中返回state状态
state
b. 我们用vue-cli来制作webapp的时候
webapp
c. 若一个组件需要很多的state状态的话, 上面方式就不够简洁了. 使用 mapState 辅助函数
mapState
2. getters的运用
a. 基本使用
b. mapGetters 辅助函数 简化应用
3. mutations的运用
a. mutations 下面是一个简单的例子
b. 给mutations 提交额外的参数
c. 使用常量替代 Mutation 事件类型
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
d. 在组件中提交 Mutations
// 方法1
this.$store.commit('xxx')
4. actions的运用
a. 前面我们已经说过了,actions主要是来同时提交多个mutations
b. 进行异步操作 多看看 这例子写的很好
c. 在组件中分发 Action
网友评论