Vuex是什么？
Vuex 我姑且称之为vue老爷的管家
刚开始学vuex的时候，它给我的感觉类似于cookie、local Storage这种东西。使用时给我带来最方便的就是让组件传值变得更加方便了。
官方把vuex称为状态管理模式（State Management Pattern）。
vuex分为3个part：
- View 视图
- Action 行为
- State 状态数据
怎么运作的：
- 页面上的一些操作会触发Actions中的一些方法
- Actions改变State中的数据
- State中数据有反馈给页面呈现
Vuex好在哪儿？
传统组件传值弊端：
- 组件层层嵌套多了会导致传值非常麻烦，尤其是兄弟组件传值
- 代码不易维护
解决办法：
- 把共享的数据抽离出来单独存放
- 写一些api去操作数据
- 这样不管哪个组件要用，直接调用api即可
好处：
- 代码清晰，维护简单
什么时候应该用vuex？
这个问题参考了vuex官方的解释才明白
简单来说：
- 中大型单页应用：vuex
- 小型应用：store模式足矣
注意事项：
1、Vuex和全局对象的区别
- vuex中的状态是响应式的
- 改变状态不能直接操作，而是显式地提交mutation。目的是为了把状态的变更记录更好的了解我们的应用
Vuex的核心概念
State 定义数据
Getters 定义一些方法直接获取State中的数据（或者处理后的数据），跟computed一样
Mutations 定义唯一改变State中数据的方法，第一个参数必须是state，剩下的随便
Actions 提交执行Mutations的地方
Module 用来分隔store成一个个模块，以免变得太大太臃肿
State
首先在一个js文件中声明一个store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18import Vue from 'vue'
import Vuex from 'vuex'
import todo1 from './modules/todo1.js'
import todo2 from './modules/todo2.js'
import todo3 from './modules/todo3.js'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
todo1,
todo2,
todo3
}
})
//把这个小仓库暴露出去
export default store
然后编写一个个模块，这些模块组成一整个store
在modules目录下建立todo1.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24const state = {
todos: [] //这是我们的数据或状态
}
const getters = { //可以认为是计算属性，返回值会被缓存
getAllTodos (state, num) { //第一个参数必须是state，其他的可以自己加
return state.todos[0] + num //这种情况直接返回了一个值，所以结果会被缓存
},
getTodoById (state) {
return (id) => state.todos.find(todo => todo.id === id)
} //这种情况返回的是一个函数，每次都会被调用所以不会缓存结果，要注意
}
const mutations = { //更改state的唯一方法
todosPush (state, num) { //调用时得用store.commit('todosPush', 123)
state.todos.push(num)
}
}
const actions = {
todosPush ({ commit }) { //注意：1、actions里的方法第一个参数是跟store具有相同属性和方法的context对象。2、actions里的方法都通过store.dispatch('todospuah')触发
commit('todospush', 123)
}
}
- 未完待续。。。
