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内部对象的工作原理

#授课思路

#案例作业

完成一个todolist 通过仓库