Vuex的基础知识

Vuex

一、认识Vuex

1、Vuex是做什么的？

官方解释：Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

2、状态管理到底是什么？

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。

其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。

然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？

当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。

如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。

不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。

3、管理什么状态？

比如说用户登录之后，在不同页面不同组件都要显示用户的信息，这个时候就需要使用Vuex了。

4、单页面状态管理

在这个图中，单页面管理是这样的：

• State：就是状态，也就是我们一个组件的data数据
• View：就是当前组件的页面
• Action：就是用户的动作、或者说是函数

很简单吧

5、多页面状态管理

多页面也就是很多组件的时候，如果要用到同一个变量（即状态），并且都需要对他进行操作，这个时候用父子组件传递就很麻烦了，我们可以将这个变量提出来，放到一个全局的变量中，这样大家可以对他进行操作，且更改的是同一个变量并且我们还想要有人帮忙管理这些全局变量。

Vuex即是帮我们管理这些全局变量的工具。

6、Vuex状态管理

这是一个Vuex状态管理的具体流程图，其中：

理论上我们可以在组件中直接对数据进行修改，即Vue Components对State进行修改，但是官方的图并不推荐我们这样做，他推荐按他的流程来。

Vue Components是组件

Dispatch是分发，就是说组件们会调用函数等进行下一步的操作

Actions是动作，就是上一步分发完操作之后的动作，一般是一些异步操作，这个时候会调用backend后端的接口一起进行操作

Commit是提交，接着Vuex会向mutation进行提交，告诉mutation组件干了什么

Mutation是变化，他会将变化告诉State，同时Vuex有一个浏览器插件Devtools，变化会在插件中进行显示

State是状态，Mutation将变化告诉State后，State会进行相应的更改，然后Render渲染到Vue components中

很显然，我们可以看出如果我们直接对State更改，就无法使用devtools来查看更改的变化了，Vuex也无法知道变化

二、Vuex的基本使用

使用Vuex我们类似于使用Router，单独创一个文件夹存放js代码文件，但这里我们不叫vuex，因为我们使用的实践上是vuex里面的store方法，并且这个单词意思是仓库，很好的诠释了他的作用。

新建index.js文件

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

Vue.use(Vuex)

const store = new Vuex.Store({
   
	state: {
   
		count: 0
	},
	mutations: {
   
		increment(state) {
   
			state.count++
		},
		decrement(state) {
   
			state.count--
		}
	},
	actions: {
   },
	modules:{
   },
	getters:{
   }
	
})

export default store;

写入以上代码：也是引入插件，然后use插件，use就是安装插件（执行了vue.install()方法），然后在这里我们注意到并不是new Vuex而是new Vuex.Store，然后对象中有上面介绍的5个属性。

之后在main.js挂载即可

我们这里写一个简单的应用，计数器使用Vuex进行状态管理

<template>
  <div>
    <h1>---------{
  { $store.state.count }}----------</h1>
    <button @click="add">+</button>
    <button @click="sub">-</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  computed: {
    c