关于vuex的理解

刚开始学vue的时候，看到很多项目都有用vuex，抱着一种好奇的心态去看下vuex的官方文档,如下:

Vuex官方文档

Vuex 是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

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

。。。一看晕了，官方的文档果然是用官方的语言，让我们这些平民百姓小渣渣看得一脸懵逼,于是这篇文章呼之欲出。

每一个 Vuex 应用的核心就是 store（仓库）。
“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

仓库是用来干嘛的，顾名思义仓库就是存储某些东西的，需要就从里面拿取出来。哦，那么我们就可以先理解为vuex是帮我们存储数据的。

一说到存储数据，我们会想到哪里可以存储数据?  变量、数组、cookie、localstorage、session等等 。那么store和这些有什么区别呢?我们先来看下store长什么样子

const store = new Vuex.Store({
state:{
count: 2
}
})
我们可以看到store对象里面包含了state,而state也是一个对象，所以"store”基本上就是一个容器。仔细一看，这个store就是用来存储数据而已，那么我们就会产生一个疑问，store和全局变量到底有什么区别呢？借用文档的话

Vuex 和单纯的全局对象有以下两点不同：

1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

好了，现在我们可以这样理解store：Vue的核心是组件，那么组件之间怎么进行通信呢？我们第一时间会想到父子组件之间的通信props和$emit，那非父子关系的组件怎么通信呢？当然办法还是有的，或许你会想到事件传参或者多层嵌套，但是这样就是使得代码臃肿并且难以维护。

因此Vuex应运而生，把组件共享状态抽取出来，以一个全局单例模式管理。另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

简单来说，就是把组件需要共享的数据抽取出来，交给store来处理

此外,store是内存机制，而不是缓存机制，当前页面一旦刷新或者通过路由跳转亦或是关闭，都会导致store初始化。因此在之前就暂时把store看成一个多功能的全局变量.

那么store一般保存的是什么数据呢？

1.组件的初始数据          2.后台返回来的初始数据

现在相信大家对Vuex有了初步的了解，那么我们来进一步了解Vuex的核心概念,分别是

State、  Getter、  Mutation、  Action、  Module

为了方便我们了解Vuex的核心概念，我们需要动手实践.

我们一般是使用vue-cli搭建项目的，首先我们现在src目录下新建一个名为“store”的文件夹,然后在store目录下新建名为“index.js”文件。

那我们先引入vuex    npm install vuex --save

通过package.json我们可以看到安装vuex是否成功引进

"dependencies": {
"element-ui": "^2.4.5",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
接下来就分别需要在store->index.js和main.js分别配置

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) //在创建Vue实例之前

const store = new Vuex.Store({
state:{
count: 2
}
})

export default store
//main.js
import store from './store'

new Vue({
el: '#app',
router,
store, //通过在根实例中注册 store 选项
render: h => h(App) //vue2.0的写法
})
好了，现在我们已经配置好了基本环境,开始实战了。

我们需要vue文件来实验，那么我在components下新建Test.vue文件,写入如下内容

// components/Test.vue
<template>
<div>
{{count}} //2
</div>
</template>

<script>
export default{
computed:{
count(){
return this.$store.state.count
}
}
}
</script>
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性computed中返回某个状态

通过在根实例中注册 store 选项（main.js），该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。

因此我们可以看到页面显示的是结果是2

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

// components/Test.vue
<template>
<div>
{{count}} //2
</div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default{
computed:{
...mapState({
// 使用对象展开运算符将此对象混入到外部对象中
// 第一种：箭头函数可使代码更简练
count: state => state.count
//第二种: 传字符串参数
count: 'count'
})
},
}
</script>
因为这里要提一下箭头函数使用的坑，所以先提前使用到getters。接下来把store/index.js和Test.vue修改一下

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)//在创建Vue实例之前

const store = new Vuex.Store({
state:{
//存放组件之间共享的数据
count: 2,
other: 5,
},
getters:{
//过滤state数据,function处理
filter : state => state.count ? 1 : 0
}
})

export default store
//Test.vue

<template>
<div>
{{count}} ..{{num}} ..{{other}} // 2 ..1 ..5
</div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default{
computed:{
count(){
return this.$store.state.count
},
num(){
return this.$store.getters.filter
},
...mapState({
// 使用对象展开运算符将此对象混入到外部对象中
// 第一种：箭头函数可使代码更简练
other: state => state.other

// 第二种: 传字符串参数
other: 'other'

// 这里如果想得到num的值,是不能用state.num,因为没在state里定义
// 那么如果用箭头函数的话也不可以，因为箭头函数改变了this的指向
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
other(){
return this.num
}
})
}
}
</script>

---------------------
作者：magic_xiang
来源：CSDN
原文：https://blog.csdn.net/magic_xiang/article/details/81460708
版权声明：本文为博主原创文章，转载请附上博文链接！