2021-02-21

vuex的使用

在vue中进行兄弟组件之间的通讯的时候我们会用到eventbus和vuex这两种方式，当然并不是这两种方式仅仅局限于兄弟组件通讯，当项目较大时候，我们通常会用到vuex

1.创建vuex实例

vuex项目初始化后，src目录会多一个store/index.js，里面会进行vuex的初始化，vuex的组成如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
//vuex中数据存储
  state: {
    userinfo: 'defaultValue'
  },
  //修改数据
  mutations: {
    changeUserinfo(state, payload) {
      state.userinfo = payload
      // console.log(state);
    }
  },
  //异步操作
  actions: {
    //异步改变state数据
    asyncChange(xxx, payload) {
      let user = '张三'
      setTimeout(() => {
        user = payload
        xxx.commit('changeUserinfo', user)
      }, 1000)
    }
  },
  //计算属性
  getters:{
    userChangeNum(state){
      return state.userinfo+'改变了'
    }
  },
  modules: {
  }
})

main.js中引入store

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Mock from '@/mock'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import XLSX from 'xlsx'
Vue.config.productionTip = false
Vue.use(XLSX)
Vue.use(ElementUI);
Vue.filter("filterAdd1", function (value, one, two) {
  return value + one + two; //默认第一个参数就是默认要过滤的那个值
});
Vue.filter("filterAdd2", function (value) {
  return "$" + value;
});
new Vue({
  router,
  store,
  Mock,
  render: h => h(App)
}).$mount('#app')

引入以后我们就可以访问store中state中的数据

    getstate() {
      console.log(this.$store.state.userinfo);
    },

state中数据的修改尽量不要用this.$store.state来修改，而应该调用mutations方法来修改，而mutations中的方法用commit来调用

    changeStateByMutations() {
      this.$store.commit("changeUserinfo", "son1changeval");
      console.log(this.$store.state.userinfo);
    },

在vue组件中的方法里调用vuex中的方法来改变state中的值如上面代码所示，但是mutations中只能是同步操作，异步操作的代码要放在actions中来完成，但是如果仍然要修改state中的值，就还是要调取mutations中的方法，actions的方法调用用dispatch来调用，第一个参数为方法名，第二个参数为传递的值

 this.$store.dispatch("asyncChange", "李四");

getters为vuex中的计算属性和computed类似，getters中的值获取和state中的值获取方式类似

this.$store.getters.userChangeNum

vuex借助于辅助函数的操作方法

这是为了方便在组件中的使用，借助于辅助函数来处理vuex中的数据，首先先引入到组件中

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';

state和getters的处理放在计算属性中，mutations和actions的处理放到methods中去

  computed: { ...mapState(["userinfo"]), ...mapGetters(["userChangeNum"]) },
  methods: {
    ...mapMutations(["changeUserinfo"]),
    ...mapActions(["asyncChange"]),
    }

如此一来再获取state和getters中的数据或者调用mutations和actions中的方法时就方便多了，直接用this点出来就可以了

    getstateByThis() {
      console.log(this.userinfo);
    },
    getGettersByThis() {
      console.log(this.userChangeNum);
       this.changeUserinfo("this点change");
    },

值得注意的是调用actions和mutations中的方法就不用

 this.$store.commit("changeUserinfo", "son1changeval");
this.$store.dispatch("asyncChange", "李四");

而是

this.changeUserinfo("son1changeval")
this.asyncChange("李四")

另外，我们在项目中也可能会因项目多人协作开发，且模块较多而用到vuex中的moudles将vuex分为不同的各个模块，此时各个模块之间都有各自独立的state，actions，mutations，getters,此时在各个模块声明时候有个属性叫namespaced（命名空间）此属性若为true，则各个模块相互独立，各自的模块的数据可以同名，访问时需要加上模块名前缀比如下面的代码

    ...mapActions([
      "moduleA/sampleFn" // -> this['moduleA/sampleFn']()
    ]),
          this.$store.dispatch("moduleA/sampleFn"); // 直接从store中dispatch

若namespaced设置为false，则表示各模块均为全局注册，用法和不分模块时调用方法一致