Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
当我们组件的层级变得复杂，多个组件共享状态时数据的流动容易被破坏，容易发生混乱，难以管理。
两个常见的场景：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
在这种时候，维护状态是极其困难的。
vuex应运而生。vuex可以将组件的那一些需要共享的状态抽取出来，以一个全局单例模式进行管理。也就是说，无论哪一个组件，都可以获取到这些共享的状态，或者触发行为来改变状态。
这就是vuex的主要原理。下面是一个使用vuex的demo。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
</head>
<body>
<div id="app">
<button @click="plus">+10</button>
<counter></counter>
</div>
</body>
<script>
// 创建一个store
const store = new Vuex.Store({
state:{
count:20
},
//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
//要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法
// mutation 可以有参数，称作载荷
mutations:{
plus(state,n){
state.count+= n;
}
},
//Action 提交的是 mutation，而不是直接变更状态
//Action 可以包含任意异步操作
actions:{
// plusAction(context){
// context.commit("plus",10)
// }
//参数解构简化代码，效果跟上面那个一样
plusAction({commit}){
commit("plus",10)
}
},
// getter用于从 store 中的 state 中派生出一些状态
getters:{
countMul(state){
return state.count * 10;
}
}
})
// 计数器组件
const counter = {
template: `<div>计时器：{{count}} {{countMul}}</div>`,
computed: {
count(){
return this.$store.state.count;
},
countMul(){
return this.$store.getters.countMul;
}
}
}
// 新建vue实例
new Vue({
el: "#app",
//在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到
store: store,
data:{
somedata: "这里是一些数据。"
},
components:{
counter
},
methods:{
plus(){
// 用mutation触发
// this.$store.commit("plus",10);
// 用action触发
this.$store.dispatch("plusAction",10)
}
}
})
</script>
</html>
