关于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
版权声明:本文为博主原创文章,转载请附上博文链接!