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

2022-11-09 23:01:00

第十八单元(单向数据流 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 通过仓库

码农公寓