VUE组件系统极速入门2--vuex
看完了官网vuex一头雾水的，比如vuex中的...mapState、countAlias: 'count'等。没看过官网也没事，希望对你们有帮助。
下文都是我的个人理解，官网的就引用了代码，也许存在着很多错误的描述或者理解，请各位请教，我会改正的。
这个坑之前就深挖了~现在是时候填了。
为什么要有vuex？
它是管理组件与组件通信的库。
子组件与父组件之间通信还是很方便的。但是如果是同级组件，或者是其它的复杂情况，比如：
- a.vue中的子组件想与b.vue中的子组件的通迅
- a.vue想与b.vue中的子组件的通迅
- a.vue中的子组件想与b.vue通迅
- a.vue的子组件的子组件想与b.vue的子组件通迅
- .....
就是为了解决了类似的问题~
我们把事件想简单点吧，如果你管理那么多组件（这个改变了那个的数据，那个改变了这个的数据，那个组件又多了点什么，这个又少了点什么），你会怎么做呢？就说想法，不用实现。
我的想法是：没有蛀牙 把整个应用的数据全部集中起来，谁想用作显示都无条件同意，而谁想改，改完了一定要通知所以用到这个数据显示的组件，还不是美滋滋？
vuex也是这个意思，它一共分为以下5个部分
- state 放数据的
- Getter 获取数据的
- Mutation 同步改变数据的
- Action 异步改变数据(利用Mutation实现)
- Module 可以把全局的数据仓库分为几个单独的模块,比如用户一个，文章一个。
1 state
1.1 state 定义
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
然后mutations先提一下怎么用吧(官网的例子，原汁原味 )
store.commit('increment')
console.log(store.state.count) // -> 1
然后要把这货放在组件里,如果放入父组件中，那么子组件也可以使用。通过 this.$store。
//普通的定义
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
store,
components: {XXX},
template: `XXX`
})
//*.vue
export default {
el: '#app',
store,
components: {XXX}
}
</script>
1.2 关于mapState
mapState的作用说到底，就是两个作用，先说第一个：别名。
上官网的例子，真的是要了亲命了唉)：
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
先说说mapState的作用，返回一个对象。
什么样的对象
{
cout: xxx //第一个
coutAlias:xxx //第二个
countPlusLocalState(state){xxxx}//第三个
}
我尽可能说详细一点，
export default {
computed: mapState({
/*根据箭头函数，生成的函数为
function(state){ return state.count},
所以count的值最后是state.count。count是个值。*/
count: state => state.count,
/* countAlias只是个名字，与上面的count没有一毛钱关系，我们的大前提，
是使用的vuex里的mapstate，所以，只要我们给一个store里的属性名，
mapstate就会把属性名对应的属性返回给我们，
并用我们提供的新名字。所以，countAliae就对应的state里的count。
*/
countAlias: 'count',
/*注意，我强调一下，如果你只给属性名，不给别名，那么就会按原属性名返回。 比如就是一个孤零零的 'a' 你调用的时候也要调a就完事了，上面的是调countAlias */
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
/* 箭头函数基础，亲，如果你看不懂为什么要这样，请去参考下ES6的箭头函数 */
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
接下来讲mapState的第二个作用：偷懒。
突然出现了一个...mapState,这个...就是对象展开运算符，是ES6里的，可关键是为什么搞了这么一个另人费解的东西，有什么用呢？
答：并没有什么卵用还是有点用的，比如，你的compute属性里想用store里返回的东西，一共用5个！就可以用mapstate传5个属性名进去把五个搞出来再添加到compute里。
比如
computed:{
a1:function(){xxxxx}
}
可是你需要a2到a6，如果一个一个的写的话，就会这样：
computed:{
a1:function(){xxxxx},
a2:function(){return this.$store.a2},
a3:function(){return this.$store.a3},
.......
}
有了这个...
//注意，我再强调一下，如果你只给属性名，不给别名，
那么就会按原属性名返回。所以可以这么写：
compute:{
a1:function(){xxxxx}，
...mapState({'a2','a3','a4','a5','a6'})
}
然后就全有了，和上面的作用一样，看吧，偷懒就完事了。
2 Getter
首先要审明下，做为读书人的我，也是会骂人的！！！！
之前很多程序员总是有些很奇怪的爱好，比如他母亲的Getter。这个Getter一见到名字就是想起了被java支配的恐惧，所以不说了 所以一定要好好理解！
vuex里的getter，是在store里的一个东西，为什么需要它呢？比如，
this.$store.state.todos.filter(todo => todo.done).length这一句分别在十个函数里都出现了，就可以把他考虑做成一个getter函数。
把官网的例子搞了过来
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
Getter 会暴露为 store.getters 对象：
store.getters.doneTodos // 运行会得到 [{ id: 1, text: '...', done: true }]
Getter接受其他 getter 作为第二个参数，很奇怪是吧，但是有时候需要用到getters里的别的函数。(这里定义时不支持this直接拿)
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
store.getters.doneTodosCount // 得到1
在任何组件中（只要是上一级组件有store的）都可以使用：
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
getter 为什么好好的要返回一个函数？因为你返回了一个函数，还可以给函数传值，让他查些什么玩意，难道你们没有发现上面的例子都只是没有传我们自定义的参数的？现在发现了就行~
getters: {
// ...
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
还有剩下的mapGetters,嘿嘿，和上面的mapState一样,返回属性的规则也一样：1 别名 2 偷懒
3 Mutation
如果 1与2都是获取数据展示的话，那么3与4就是修改完通知了~
搞一手官网：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
一个最基本的例子：
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state) {
// 变更状态
state.count++
}
}
})
//使用：
store.commit('increment')
//注意，这里的increment 只能通过store.commit('increment')才能触发
载荷，传事件的时候同时传个参数
既然能传一个字符串的事件类型的increment，那么一定会有别的更复杂的使用方法。妥妥的，commit里还能搞个别的东西传过去，这个就叫：载荷（payload）（我觉得可以理解成： 装备）
mutations: {
increment (state, payload) {
state.count += payload.amount
}
//提交的风格有两种（还是从官网上搞的）
//风格1:
store.commit('increment', {
amount: 10
})
//风格2：（个人觉得这个逼格更高一点点）
store.commit({
type: 'increment',
amount: 10
})
使用payload也是有条件的，
- 提前在你的 store 中初始化好所有所需属性
- 在对象上添加新属性时，应该更新这个属性，而不是再用一个新的对象
- 使用
Vue.set(obj, 'newProp', 123) - 以新对象替换老对象。
state.obj = { ...state.obj, newProp: 123 }
- 使用
使用更短的名字使用Mutation&在组件中使用Mutation
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。 (官网原话)
import { mapMutations } from 'vuex'
export default {
// ...
methods: {
...mapMutations([
'increment', /*将 `this.increment()` 映射为
`this.$store.commit('increment')`*/
// `mapMutations` 也支持载荷：
'incrementBy' /*将 `this.incrementBy(amount)` 映射为
`this.$store.commit('incrementBy', amount)`*/
]),
...mapMutations({
add: 'increment' /* 将 `this.add()` 映射为
`this.$store.commit('increment')`*/
})
}
}
然后官网也提到了使用mutations的注意事项
不能使用异步函数（等待时间不能太长的函数，什么网络连接，读写文件，都不是异步函数）
如果你的程序中，有很多'increment'这种事件，推荐用常量保存后放在一个文件中，就像这样：
//文件名： mutation-types.js
export const GO_TO_PICS = 'GO_TO_PICS'
export const GO_TO_NEWS = 'GO_TO_NEWS'
export const GO_TO_WE = 'GO_TO_WE'
4 Action
离4这个标题不远处，你依稀可以看到，mutations不能使用异步函数，
Action就是提交异步事件的~
Action 提交的是 mutation，Action提交的是Action ，提交的是 mutation。重要的事件要说三遍。所以，Action是在mutation外又加了一层，看一个简单的例子。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
context是什么玩意？有什么用？
答：他是和 store 实例具有相同方法和属性的 context 对象。作用是[个人猜测，未验证]context对象作为store的辅助，也许是store的一些操作一定要通过context进行。
调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
少写一点(引用自网站，纯语法)：
实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用
commit很多次的时候）：
actions: {
//这是ES6的语法
/*举个例子：{ blowUp } = { blowUp: 10 }; 结果：{blowUp:10}
从blowUp中取一个叫blowUp的属性。
参数本来是传过来的context，从context中取一个commit的东西，得到 { commit : context.commit };
挺另人头大的。
*/
increment ({ commit }) {
commit('increment')
}
}
使用action
store.dispatch('increment')
但是最主要是异步调用：
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
同样的支持载荷（payload,装备）
// 以载荷形式分发
store.dispatch('incrementAsync', {
amount: 10
})
// 以对象形式分发
store.dispatch({
type: 'incrementAsync',
amount: 10
})
官网上的一个更复杂的例子-购物车：
actions: {
// es6的语法，从context中取commit与state
checkout ({ commit, state }, products) {
// 把当前购物车的物品备份起来 ...对象展开
const savedCartItems = [...state.cart.added]
// 发出结账请求，然后乐观地清空购物车
commit(types.CHECKOUT_REQUEST)
// 购物 API 接受一个成功回调和一个失败回调
shop.buyProducts(
products,
// 成功操作
() => commit(types.CHECKOUT_SUCCESS),
// 失败操作
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}
上面只是定义，还有在组件中使用action的方法，不要忘记这个。
关于mapActions，作用和定义你们懂得，下面用的官网的例子：
你在组件中使用
this.$store.dispatch('xxx')分发 action，或者使用mapActions辅助函数将组件的 methods 映射为store.dispatch调用（需要先在根节点注入store）：
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', /* 将 `this.increment()` 映射为
`this.$store.dispatch('increment')`*/
// `mapActions` 也支持载荷：
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}
组合 Action（全盘搬的官网，这个部分很好理解）
Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？
首先，你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise：
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
现在你可以：
store.dispatch('actionA').then(() => {
// ...
})
在另外一个 action 中也可以：
actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
最后，如果我们利用 async / await，我们可以如下组合 action：
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
一个
store.dispatch在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。
5 Module
这个部分以后再说吧，想了解的可以去官网看看先。
