前言
尤大大的vue从14年开始诞生到目前 vuex (vue2) 的API逐渐完善。不禁感叹尤大神的坚持和伟大的贡献，当然更多的对其技术厉害的崇拜。于是在vue盛行的当下决定领略它的轻、快、高效。
零、开始第一个DEMO
开始第一个DEMO,其中一个功能需求 - - 组件与组件之间作用域里，但又需要传递数据。
例如：App.vue为父组件，有子组件A.vue、B.vue。
- App的数据传递给A、B
- A、B数据传递给App
- A、B数据相互传递
一、思路
解决以上需求的思路如下：
- App 通过
props传递数据给A、B - A、B通过
$dispatch调用App的Event并传递数据给App - A通过
$dispatch调用App的Event并传递数据，App通过$broadcast调用 B的Event并传递数据
当需要通信的组件是父子关系时，可以使用props $dispatch $broadcast 传递数据，然而，当需要通信的组件是非父子关系时，他们就需要一个共同的父组件作为介质才能相互传递数据。如果项目大，组件通信多并频繁，那么App 作为二者之间的协调者，导致这些组件并没法被复用，被迫紧密耦合。管理起来也非常的麻烦。
于是vuex由此诞生了，尤大大说， Vuex 所要解决的问题：如何管理一个包含许多组件的大型应用。
二、Vuex
流程图解如下：
store：store 存储应用所需的数据。
action：是一种专门用来被 component 调用的函数。action 函数能够通过分发相应的 mutation 函数，来触发对 store 的更新。action 也可以先从 HTTP 后端或 store 中读取其他数据之后再分发更新事件。
getter：也是用来被 component 调用的函数。getter函数是获取store的state对象组件B所需的值。
三、使用vuex
App.vue
<template>
<div>
<A></A>
<B></B>
</div>
</template>
<script>
import A from './A.vue'
import B from './B.vue'
export default {
components: {
A: A,
B: B
}
}
</script>
A.vue
<template>
<div>
<input type="date" placeholder="Date" />
<button>保存</button>
</div>
</template>
<script>
export default {
}
</script>
B.vue
<template>
<div>
<p>vuex demo</p>
</div>
</template>
<script>
export default {
}
</script>
1. 加入store
先用npm安装Vuex：
$ npm install --save vuex
建一个新文件 vuex/store.js：
import Vue from 'vue'
import Vuex from 'vuex'
// 告诉 vue “使用” vuex
Vue.use(Vuex)
// 创建一个对象来保存应用启动时的初始状态
const state = {
// TODO: 放置初始状态
}
// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = {
// TODO: 放置我们的状态变更函数
}
// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以连接到我们的应用中
export default new Vuex.Store({
state,
mutations
})
在需要修改的根组件注入 store，修改App.vue：
<script>
import A from './A.vue'
import B from './B.vue'
import store from './vuex/store' // import 刚创建的 store
export default {
components: {
A: A,
B: B
},
store: store
}
</script>
2.创建 action
在A.vue组件里创建并调用action 函数，修改A.vue：
<template>
<div>
<input type="date" v-model="myData" placeholder="Date" />
<button @click="save()">保存</button>
</div>
</template>
<script>
export default {
data(){
return{
myData:'myData'
}
},
methods:{
save(){
let value = this.myData
this.update(value)
}
},
vuex:{
actions:{
update:function({dispatch},value) {
dispatch('UPDATE',value)
}
}
}
}
</script>
3. 创建 state 和 mutation
修改 vuex/store.js：
const state = {
// 应用启动时，myData置为0
myData: ''
}
const mutations = {
// mutation 的第一个参数是当前的 state
// 你可以在函数里修改 state
UPDATE (state, value) {
state.myData = value
}
}
4.在组件获取值
修改B.vue：
<template>
<div>
<p>{{myData}}</p>
</div>
</template>
<script>
export default {
vuex:{
getters:{
myData: function(state){
return state.myData
}
}
}
}
</script>
四、相关资料
