Vue学习----第七天_Vuex（详细梳理）【6.13】

一、认识Vuex

1.Vuex是做什么的？

Vuex是实现组件全局转态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

2.Vuex管理什么状态

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中，对于组件中的私有数据，依旧存储在组件自身的data中即可

2.1.使用Vuex统一管理状态的好处

1. 能够在Vuex中集中管理共享的数据，易于开发和后期维护
2. 能够高效的实现组件之间的数据共享，提高开发效率
3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

3.单页面的状态管理

3.1.单页面的状态管理的实现

4.多界面状态管理

5.Vuex的状态管理图例

二、Vuex的基本使用

1.简单的案例

1.1.代码编写

store中index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
  state: {
  	counter：0
  },
  mutations: {
  	// 加一
  	increament(state) {
      state.counter++
    },
    // 减一
	decreament(state) {
	  state.counter--
	}
  },
  actions: {},
  getters: {},
  modules: {}
})
// 3.导出
export default store

App.vue文件：

<template>
  <div id="app">
    <h2>---------APP内容-------------</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    addition() {
      this.$store.commit('increament')
    },
    subtraction() {
      this.$store.commit('decreament')
    }
  }
}
</script>

<style>
</style>

1.2.挂载在Vue实例中

1.3.小结

三、Vuex核心概念

1.State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中存储

1.1.组件访问state数据

1.1.1.组件访问state数据方式一：$store.state.数据名称

1.1.2.组件访问state数据方式二：

在组件中映射为计算属性

1.2.state单一状态树

2.Getters

Getter用于对store中的数据进行加工处理形成新的数据，不会处理store里的原数据。
①.Getter可以对store中已有的数据加工处理之后形成新的数据，类似vue的计算属性
②.store中该数据发生变化，getter的数据也会跟着变化

2.1.使用getters的两种方式

2.2.getters基本使用

2.3.getters作为参数和传递参数

3.Mutation

Mutation用于变更Store中的数据：
①.只能通过mutation变更Store中的数据，不可以直接操作store中的数据
②.通过这种方式虽然操作起来繁琐一些，但是可以集中监控所有的数据的变化

3.1.触发mutations两种方式及传递参数：

3.1.1.方式一：this.$store.commit('mutation中函数名称')

传递参数：

3.1.2.方式二：

在组件的methods中

3.2.mutation提交风格

3.3.mutation响应规则

Vue.set添加属性、Vue.delete删除属性。都是响应式

3.4.mutation中常量类型

3.5.mutation同步函数

可以从网上下载一个谷歌Devtools插件，更好的观察调试vue

4.Action

action用于异步任务。
如果通过异步操作变更数据，必须通过action，而不能使用Mutation，
但是在Action中还是要通过触发Mutation的方式间接变更数据

4.1.触发actions方式

4.1.1.方式1：

4.1.2.方式一传参：

4.1.3.方式2：

4.2 .Action基本定义

4.3 .Action分发

4.4.Action返回的Promise

5.Module

5.1.认识module

5.2.mutation局部状态

5.3.mutation中action写法

四、项目结构组织

1.项目结构

例如：

内容持续更新中…
学习自：b站ilovecoding
lvan学习笔记-文章内容仅个人观点
2020.6.13