为什么要引入Vuex
单向数据流概念
我们页面是由很多个视图来组成的,用户的操作会带来视图上状态的变化,状态的变化又会来驱动视图的更新,如果说,我们的页面没有采用这种数据流的概念去开发的话,组件间的状态管理就会变得异常的复杂
我们常见的用Vuex来解决的问题如下:
- 多个视图依赖于同一状态(例:菜单导航)
- 来着不同视图的行为需要变更同一状态(例:评论弹幕)
Vuex介绍
- 为Vue.js开发的状态管理模式
- 组件状态集中管理
- 组件状态改变遵循统一的规则
Vuex代码实例-测试在other.vue组件传递一个状态到About.vue组件
测试在other.vue组件传递一个状态到About.vue组件,步骤如下:
- 在store.js文件里的state对象里添加count:0,mutations方法集里添加increase方法,该方法每次执行则count++
- 在other.vue组件里添加一个按钮,每次点击的时候触发一个事件,执行add方法,引入vuex,并在add函数里调用store.js文件里的increase方法
- 将count的值显示在About.vue组件中
在store.js文件里的state对象里添加count:0,mutations方法集里添加increase方法,该方法每次执行则count++
store.js
import Vue from 'vue'
import Vuex from 'vuex'//这里引入了vuex
Vue.use(Vuex) //绑定了vuex
export default new Vuex.Store({
state: {
//state是组件的状态,在这里做一个集中的管理
count:0 //要传递的数据是count
},
mutations: {
//是唯一一个可以去改变vuex状态的一个方法集,所有的方法都是在这里面定义的
increase(){
this.state.count++;
}
},
actions: {
}
})
在other.vue组件里添加一个按钮,每次点击的时候触发一个事件,执行add方法,引入vuex,并在add函数里调用store.js文件里的increase方法
other.vue
<template>
<div>这是other
<button type="button" @click="add()">添加2</button>
</div>
</template>
<script>
import store from '@/store' //引入vuex,这里@的符号代表str目录
export default {
name: "other",
methods: {
add() {
console.log("add Event in other.vue!!");
store.commit('increase');
}
}
}
</script>
<style scoped>
</style>
将count的值显示在About.vue组件中
Abount.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
import store from '@/store'
export default {
name:'about',
store, //引用store
data(){
return{
msg:store.state.count
}
}
}
</script>
展示
切换到other页面,点击两次 添加2按钮