Vuex 学习笔记
Vuex相关概念
1. Vuex能解决什么问题 ？
先看一个表示“单向数据流”的简单示意图：
其中：
- state，驱动应用的数据源；
- view，以声明方式将 state 映射到视图；
- actions，响应在 view 上的用户输入导致的状态变化。
然而，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
2. 什么是Vuex ？
因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。
这就是 Vuex 背后的基本思想。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
3. 什么时候用Vuex ？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。
但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
Vuex核心概念
(详见Vuex)
1. Store
2. State
3. Getter
4. Mutation
小实战：
创建一个项目，并安装vuex插件。在命令行中分别敲入：
vue create demo//选用默认配置
cd demo
npm i vuex
在main.js文件中，修改如下：
import Vue from 'vue'
import Vuex from 'vuex' //引入vuex
import App from './App.vue'
Vue.use(Vuex);
Vue.config.productionTip = false;
const store = new Vuex.Store({
state: {
count:0
},
mutations: {
increment(state,n) {
state.count = state.count + n;
}
},
actions: {
increment({state}) {
setTimeout(()=>{
state.count++
},1000)
}
},
getters: { //Getter 接受 state 作为其第一个参数
doubleCount(state) {
return state.count * 2
}
}
})
new Vue({
store,
render: h => h(App),
}).$mount('#app')
在App.vue中，修改如下：
<template>
<div id="app">
{{count}}
<br/>
{{$store.getters.doubleCount}} //Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值
<br/>
//
<button @click="$store.commit('increment',2)">count++</button>
<br />
<button @click="$store.dispatch('increment')">count++</button>
</div>
</template>
<script>
export default {
name: 'app',
computed: {
count() {
return this.$store.state.count
}
},
date() {
return {
}
}
}
</script>
运行项目：npm run serve
运行结果：
每按一次 第一个"count++"按钮时，第一个数字就会加2，第二个数字总是第一个数字的两倍。
每按一次 第二个"count++"按钮，第二个数字就会加1，第二个数字总是第一个数字的两倍。
