第一章 初识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