接上篇《24.Vue UI框架 ElementUi 按需引入》
上一篇我们讲解了如何按需引入ElementUI,至此vue系列已经基本介绍完毕,本篇我们来介绍vue的升级版vuex。
本系列博文使用的Vue版本:2.6.11
vuex官方网站:https://vuex.vuejs.org/zh/
一、Vuex 是什么?
下面是Vuex官方网站上对Vuex的介绍:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
这里简单总结一下,其实Vuex就是用来管vue的,管它的什么呢?就是管它的组件状态和一致性,这里很多童鞋可能还不是太明白,我们来通过例子说明一下:
如上图(图片出自页底视频教程)的组件关系,其中的“首页”和“新闻”页面,它们既不是父子组件,也不是兄弟组件,因为它们既没有上下级关系,也没有相同的顶级父组件,那么这两个组件之间如何传值?如何保持状态的一致性呢?
通过之前的学习我们知道,父子组件之间的传值,可以通过“this.$parent”、“this.$refs”获取父子的值或属性,兄弟组件之间可以通过“根组件广播数据”来进行值或方法的传递,像非父子和兄弟的组件,虽然可以通过路由进行传值,但是传递的东西是有限的(get请求有限制),此时就需要通过vuex的管理来实现了。
一句话,vuex主要解决的就是不同组件之间的数据共享、数据持久化的问题。
(小声说一句,其实vuex能实现的,通过之前学习的Localstrage和SessionStorage都可以实现。一般小项目中使用这两个小兄弟就行了,大型项目便于管理,可以使用vuex。)
二、Vuex的使用
Vuex有“State”、“Getters”、“Mutations”、“Actions”、“Modules”几种核心概念,下面一一讲述一下。
(简单一句话描述:State是组件的状态,Getter是State的计算属性,Mutation是方法,可以改变State的数据,Action用来触发Mutation去改变State的数据,Module用来将不同状态分割成模块。)
这里的详细描述大家去看官方文档即可,这里我们通过一个实例来了解Vuex的使用。
1、安装vuex
在项目所在的文件夹目录下,执行安装指令:
npm install vuex --save
2、新建Vuex文件夹和store.js
在项目的src目录下,新建一个名为“vuex”的文件夹,便于单独管理vuex的相关内容,然后在该文件夹下新建一个store.js文件:
3、在store.js引入vuex,设置关键属性
store.js我们可以理解为仓库,用来存放核心组件和常用组件的。
我们在store.js文件中来分别引入vue和vuex,并设置关键属性:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
/**1.state在vuex中主要用于存储数据 */
var state={
count:1
}
/**2.mutations里面放的是方法,主要用于改变state里面的数据 */
var mutations={
incCount(){
++state.count;
}
}
//3.定义store
const store = new Vuex.Store({
state,
mutations:mutations
})
//4.暴露store
export default store;
上面我们设置了存储数据的state,改变state数据的mutations,然后定义和暴露包含这两个属性的store对象。这里我们在state放了一个“count”值,默认为1,然后在mutations定义了一个名为“incCount”的方法,只要调用这个方法,“count”值就会自增一次。
(注:这里暂时仅使用了state和mutations,当然还有一些其他属性)
下面我们来使用vuex,在不同组件中获取和改变store中state的参数的值。
4、在组件中使用store
(1)一个组件引入Count计数值
我们在之前的Helloworld.vue首页中引入store(之前的代码都先删除了),然后在data区域直接声明store,然后就在template区域直接引用store中的数据,同时也可以在方法中调用store中的“incCount”方法:
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div class="hello">
<h1>{{ msg }}</h1>
State中的值【Count】:{{this.$store.state.count}}
<br/>
<button @click="incCount()">增加数量</button>
</div>
</template>
<script>
import store from '../vuex/store.js'
export default {
name: 'HelloWorld',
data () {
return {
msg: '首页父组件'
}
},
store,//这里如果store是其他名字,要写成store: store1
methods:{
incCount(){
//改变vuex store里面的数据
this.$store.commit('incCount');//触发mutations定义的方法
}
}
}
</script>
<!-- 添加 "scoped" 属性来限制里面css样式只能被该组件引用 -->
<style scoped>
h1{ color:red;}
</style>
这里相当于编写了一个显示并控制共享参数的一个组件,效果:
当点击增加数量的时候,count的值就会增加。
(2)另一个组件引入Count计数值
然后我们在用户页面User.js也引入这个Count计数值:
<template>
<div id="user">
<div class="user-info"><div class="left">
<ul>
<li><router-link to="/user/userList">用户列表</router-link></li>
<li><router-link to="/user/userAdd">新增用户</router-link></li>
</ul>
State中的值【Count】:{{this.$store.state.count}}<br/>
<button @click="incCount()">增加数量</button></div>
<div class="right"><router-view></router-view></div>
</div>
</div>
</template>
<script>
import store from '../vuex/store.js'
export default {
name: 'user',
data () {
return { msg: '用户中心' }
},
store,
methods:{
incCount(){
//改变vuex store里面的数据
this.$store.commit('incCount');//触发mutations定义的方法
}
}
}
</script>
<style scoped>
.user-info{ display: flex; }
.user-info li{ line-height: 20px; }
.left{ width: 200px; min-height: 400px; border-right: 1px solid #eee; }
.right{ flex: 1; }
</style>
效果:
可以看到,两个不同组件之间通过Store实现了数据共享、方法共享。
下一篇我们继续介绍vuex的“Getters”、“Actions”等关键属性。
参考:
《IT营:itying.com-2018年Vue2.x 5小时入门视频教程》
转载请注明出处:https://blog.csdn.net/acmman/article/details/113462230