什么是Vuex?
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式,使用插件的形式引进项目中
- 集中存储和管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
- 每一个 Vuex 应用的核心就是 store(仓库),new Vue.store({…}),“store”基本上就是一个容器,它包含应用中大部分的状态 (state)
什么时候使用?
用于SPA开发大型单页应用时使用
Vuex核心概念
-
State:共享状态(变量)
-
Getter:基于state的派生状态,可理解为组件中的计算属性
-
Mutation:一组方法,改变store中状态的执行者,同步操作
-
action:一组方法,类似mutation,但其中可以含有异步操作
-
Module:模块,方便状态管理与协作开发使用
安装与使用
1、安装
npm install vuex --save
2、引入文件
import Vue from 'vue'
import Vuex from 'vuex'
3、使用vuex插件:
Vue.use(Vuex)
- 在Index.js中设置全局变量
const store = new Vuex.Store({
modules: {
user
},
// 类似于vue中的计算属性,根据gertter或state计算返回值
getters,
// 中间传值,存储各个状态
state: {
createrBrainstorm: '123'
},
// 一组方法,改变store中状态的执行者
mutations: {
setDeleteValue(state, value) {
state.createrBrainstorm = value
}
},
// 一组方法,其中可以含有异步操作
actions: {
setDeleteValueAsync({ commit }) {
setTimeout(() => {
commit('setDeleteValue')
}, 1000)
}
}
})
- 使用页面
1、引入
import { mapState } from 'vuex'
2、将全局变量映射为自己界面的变量
computed: {
// 展开运算符,将全局变量映射为自己界面的变量
...mapState(['createrBrainstorm'])
}
3、监听变量变化并执行操作
watch: {
createrBrainstorm(newVal) {
if (newVal) {
//监听到变量发生变化所执行的操作
this.queryList()
// 恢复全局变量
this.$store.commit('setDeleteValue', '123')
}
}
}