第十八单元(单向数据流 vuex状态管理)
#课程目标
1.理解什么是数据管理模式
2.什么是vuex
3.什么时候使用vuex
4.vuex安装及工作原理
5.vuex语法
#知识点
1.首先来看下图示例，当我们想实现A->D组件的通信时 需要A先跟B通信，B跟C通信，C再跟D通信，过程很繁琐，数据传输很麻烦。
graph LR;
A组件-->B组件
B组件-->C组件
C组件-->D组件
而下图则是最简单的数据管理模式，也就是说A可以跟一个store进行通信，而同时D也跟store进行通信，达到目的。
graph LR;
A组件-->store
B组件
C组件
D组件-->store
2.Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 3.如果应用够简单，最好不要使用 Vuex。一个简单的 global event bus 就足够所需了。如果需要构建是一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
#4.安装vuex npm i vuex -s
此时你的项目目录结构应该是这样的
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
├─components
│ HelloWorld.vue
│
├─router
│ index.js
│
└─store
index.js
#5.store下index.js中的内容
import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex({
state: {
name: 'zhongxue',
age: 26
},
getters: {
personInfo(state) {
return `My name is ${state.name}, I am ${state.age}`;
}
}
mutations: {
SET_AGE(state, age) {
state.age = age
}
},
actions: {
nameAsyn(store) {
setTimeout(() => {
store.commit('SET_AGE', 18);
}, 1000);
}
}
})
export default store
#(1) state使用方法
state 仓库存放状态的对象
#(2) Mutations使用方法
mutations方法都有默认的形参：([state] [,payload])
state是当前VueX对象中的state payload是该方法在被调用时传递参数使用的
#(3) Getters使用方法
可以对state中的成员加工后传递给外界,Getters中的方法有两个默认参数
state 当前VueX对象中的状态对象 getters 当前getters对象，用于将getters下的其他getter拿来用
#(4) actions使用方法
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
Actions中的方法有两个默认参数
context 上下文(相当于箭头函数中的this)对象 payload 挂载参数
#6.将store挂载到当前项目的Vue实例当中去
//打开main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store, //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
render: h => h(App)
})
#7.在组件中使用Vuex
<template>
<div id='app'>
name:<h1>{{ $store.state.name }}</h1>
</div>
</template>
#8.vuex内部对象的工作原理
#授课思路
#案例作业
完成一个todolist 通过仓库
