vuex的使用

场景： 全局状态管理，管理全局变量。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参数。