vue第十八单元(单向数据流 vuex状态管理)

第十八单元(单向数据流 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内部对象的工作原理

vue第十八单元(单向数据流 vuex状态管理)

#授课思路

#案例作业

完成一个todolist 通过仓库

上一篇:前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法


下一篇:js中表单提交后按钮变灰色的功能