一. 概述
》Vuex是一个专为Vue.js应用程序开发的状态管理模式。
- 是一个加强版的data!在单页应用中会有一个data函数,管理当前应用的状态。处理大量的需要在组件间传递的数据,直接定义一个全局的data属性保存就行了。
- 如果我们的页面比较简单,切记干万不要没事找事引入Vuex,我们使用Vuex是因为项目变得复杂之后,有很多数据需要在父组件、子组件和孙组件之间传递,处理起来很繁琐,于是就需要Vuex这样一个可以对这一部分数据进行统一管理的东西。
- 也是响应式
》什么情况需要使用Vuex管理状态在多个组件间共享?
- 大型项目中组件很多,多个组件中共用的数据
- 例如:用户的登录状态、用户名称、头像、地理位置信息等
- 例如:商品的收藏、购物车中的物品。
二. 安装使用
在手动搭建脚手架时选择vuex,或者搭建好的脚手架通过install来安装
下面来介绍一下Vuex单页面的简单用法:
1. 首先在store目录下的index.js文件中定义一个num,此时num就类似于一个全局状态下的变量:
export default createStore({
state: {
num:0
},
mutations: {
},
actions: {
},
modules: {
}
})
2. 在父组件Home中添加一个加减按钮用来操作num,然后通过$store.state.num插值将num的值显示出来($store是系统属性,通过$store.state以及this.$store.state可以直接访问全局变量,$store.state用于插值形式,this.$store.state在方法中使用)
<h2>使用全局状态</h2>
<h2>{
{$store.state.num}}</h2>
<button @click="$store.state.num--">-</button>
<button @click="add">+</button>
3. 在子组件HelloWorld中应用vuex,通过相同的语法就可以访问到num,当然在不同的页面之间也能通过该语法访问到num
<h3>在Helloworld组件中应用Vuex</h3>
<h2>{
{$store.state.num}}</h2>
此时我们在home页面改变num的值,切换到about页面,num的值也变化了
1. 使用devtools工具查看状态管理
Vue单页面只是在组件中直接改变了状态,并没有用到状态管理,状态管理如下图所示(参考官网),我们需要将值提交至Mutations来进行状态管理,而Devtools用来记录状态的改变:
1. 与上一个例子同理,在state中定义一个dnum,在页面中添加加减按钮,此时我们要改变dnum,在Mutations里定义方法操作
export default createStore({
state: {
num:0,
dnum:0
},
mutations: {
sub(state){