Vue全家桶：Vuex

🍳本文参考官网加上个人理解，如有不对欢迎指正！

1. 概述

官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式
它采用 集中式存储管理 应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。
官网：https://vuex.vuejs.org/zh/

个人理解：Vuex就是一个公共仓库，里面存储了多个组件可以共享的响应式变量。

---

2. 响应数据流

在单页面数据流图解如下

1.state：状态。可以当作用到的属性。
2.view：视图，用来显示state里属性的信息。
3.actions：在视图上绑定的事件，用来改变state里属性的值

循环路径： 就是 将state里的属性值放到view视图上显示，对视图进行点击或其他事件操作改变state属性值，然后又重新渲染到view上。就是这样一个循环。

缺点： 由于这是针对单个组件页面的，所以改变属性值很简单，但是如果多个组件页面用的是这同一个属性值，那么你这时发生改变了当然需要去通知其他也用到这个属性的页面，如果这样的依赖页面一多就会很复杂了，因为通过组件传值传来传去会显得很繁琐且不容易维护。

官方提供的vuex数据流图解

1.Vue Components：Vue组件
以下三个为vuex的内容
2.State：属性状态
3.mutations：更改State属性的状态的唯一方法
4.Actions：执行异步处理的方法

5.Backend API：后端接口。与后端进行数据交互
6.Devtools：官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

循环路径： Vue 组件获取State里的属性并显示，然后在组件上进行事件操作，事件操作分发(dispatch)给Actions进行处理，Actions再提交(commit)给mutations进行更改State状态，状态更新再重新渲染显示。

感觉好像有点繁琐，其实如果事件操作不包含异步操作的话可以直接提交给mutations进行更改状态，但存在异步操作的话一定要进行actions操作，不然devtools工具无法跟踪操作后数据。

所以图可以看成以下亚子

---

3. 基本使用

3.1 安装与初体验

安装
因为运行时时刻要用，所以安装运行版

npm install vuex --save

简单使用
和使用路由类似
1.导入vuex
2.vue使用vuex
3.创建vuex里store实例
4.export default暴露

import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store(
  state: {
  message:'hello'
  },
  mutations: {

  },
  actions: {

  },
  getters: {

  }
  modules: {

  }
)
export default store;

5.入口文件main.js引用

import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

这样整个vuex基本框架就搭好了，让我们简单的使用下state里的message属性
在组件中引用

<div id='app'>{{ $store.state.message }}</div>

这样就引用成功了

3.2 vuex核心概念

vuex有几个核心的概念。
如上：state、mutations、actions、getters、module。一一进行简单介绍

state：单一状态树

就是将属性全部集中放在这里进行管理，方便进行维护和管理

getters：

这个没找到具体叫啥，它就类似于data里的computed计算属性，也就是说他本质也是属性，用来对数据进行某种转换过滤然后返回。

moutation：状态更新

这是对状态进行修改的唯一路径，不管是异步操作还是同步操作。
由图解也可知，它需要用到commit方法进行修改状态
它由事件类型+回调函数组成
如：

  increment(state, payload) {
    state.count++;
    console.log(payload);
  },

组件中进行提交的语法：

$store.commit(事件类型，参数)

一般提交负荷是个对象，这样写

 this.$store.commit({
    type: "increment",
    age: 20,
    say: "hello",
  });

type：事件类型
整个对象包括type、age、say就是提交负荷

响应规则：
在vue中进行数据响应的前提是需要将数据初始化，所以我们将需要响应的数据提前在store中初始化。
也可以通过vue内置方法Vue.set将新属性添加到响应块，如

Vue.set(obj, 'newProp', 123)

必须是同步：
原因就是每次进行moutation操作时，devtools它都需要捕捉这个过程前后状态，但是异步操作的回调函数存在返回时间的不确定性，devtools无法识别，因此等同于它无法跟踪这个异步操作，也就不能方便我们跟踪。

action：

不直接改变状态，而是提交给moutation

可以包含任何异步操作，我们一般用来与后端进行数据交互。

  actions: {
    increment (context) {
      context.commit('increment')
    }
  }

可以通过解构进行简化

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

组件中分发给action：

store.dispatch('increment')

module：模块

如果数据量很大，为了缓解数据堆积的问题
在vuex中可以使用子模块，它们里面同样包含了以上核心概念

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
  }
})