场景: 全局状态管理,管理全局变量。state中定义的变量可以在项目任意组件中获取、修改,且全局响应变更。
【使用$emit $on props 等等实现不了的状态管理】。
有几个参数好几个地方都要用到,使用Bridge传参 父子传参等,层级太多,比较麻烦。网上调研,使用vuex可以解决这个问题。
参考:https://segmentfault.com/a/1190000015782272?utm_source=tag-newest
一、安装、引入
- 安装
npm i vuex
- 在src下建store文件夹= 》store下建index.js 文件。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;
- 在main.js中引入store,并全局注册
import store from './store';
// 全局注入。任意组件可以使用this.$store了。
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
二、模块化、操作数据
index.js
import Vue from 'vue';
import Vuex from 'vuex';
import analysis from './modules/analysis';
import headersCity from './modules/headersCity';
Vue.use(Vuex);
let store = new Vuex.Store({
modules:{
analysis,
headersCity,
},
});
export default store;
analysis.js
const analysis = {
// 初始值
state:{
regionId: "",
regionName: "",
businessId: -1,
companyId: -1
},
// 类似computed,监听state值的变化
getters:{
getParams(state) {
return state;
}
},
// mutation 改变值
mutations:{
setParams(state, params) {
if(params.regionId) {
state.regionId = params.regionId;
}
if(params.regionName) {
state.regionName = params.regionName;
}
if(params.businessId) {
state.businessId = params.businessId;
}
if(params.companyId) {
state.companyId = params.companyId;
}
}
},
// 原来触发mutations的方法。
actions:{
setRegion(context,params) {
context.commit('setParams', params);
}
}
};
export default analysis
1、state
在定义完state的初始值后,在任意组件中通过 this.$store.regionId 获取值。(不是理想方式,不推荐使用。官方有getters)
this.$store.state.regionId // 不推荐
this.$store.getters.getParams; // 官方API:getters
2、getters
获取state的值。默认带参数state。
state:{
regionId: "",
regionName: "",
businessId: -1,
companyId: -1
},
getters:{
getParams(state) {
return state;
}
},
3、mutations
对象,放改变state值的方法。(默认带参数state,可再传额外的参数)
mutations:{
setParams(state, params) {
if(params.regionId) {
state.regionId = params.regionId;
}
}
}
调用:
this.$store.commit(方法名, 要传的参数);
// 例如
this.$store.commit('setParams', {regionId: 10010});
这不是理想的改变值的方式,官方提供了API: actions
4、actions (调用改变值的方法)
// 对象。context与 store实例具有相同的方法和属性。
actions:{
setRegion(context,params) {
context.commit('setParams', params);
}
}
调用:
this.$store.dispatch(方法名, 参数);
// example
that.$store.dispatch('setRegion', {regionId: 10010});
watch: state的值
computed: {
getRegionId: function(){
return this.$store.state.regionId;// 单个数据非对象
}
}
watch: {
getRegionId(val) {
console.log(11111111)
this.$store.getters.getParams;
}
}
store:
state中定义初始值。
getters中定义获取state 值的方法,默认带state参数。
mutations 中定义改变值的方法, 默认带state。
actions中定义触发mutations中的方法,默认带context参数。