vuex 中辅助函数mapState的基本用法详解_mapstate第一个参数-CSDN博客

本文链接：https://blog.csdn.net/qq_45616003/article/details/118751927

本文详细介绍了Vuex中的辅助函数mapState的用法。在Vuex的store中定义state存储状态，然后在组件中通过computed属性使用mapState来映射state，实现数据的双向绑定。同时，通过watch监听mainSize变化，并更新DOM元素样式。在methods中通过commit调用mutations中的setMainSize方法，改变state状态。

摘要由CSDN通过智能技术生成

vuex 中辅助函数mapState的基本用法详解

1、在src/store/index.js中，引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    mainSize: { /* width: "84%", */ left: 290+'px'/* , asideW: "15%"  */},//main盒子的宽度
  },
  mutations: {//类似method
    setMainSize(state, obj) {
      state.mainSize = obj;
    }
  },

注意：mutations需要通过commit来调用其里面的方法，它也可以传入参数，第一个参数是state，第二个参数是载荷（payLoad），也就是额外的参数。

2、在需要用到mainSize的地方引入即可，在vue中的computed

 computed: {
    ...mapState(["mainSize"]),*[HTML]引入多个时逗号隔开
    cellsArrRes() {
      return this.cellsArr;
    },
  },
  //watch监听mainSize数据变化
  watch: {
    mainSize(obj) {
      var main = document.getElementById("DiagramEditor");
      var aside = document.getElementById("aside");
      main.style.width = obj.width;
      main.style.left = obj.left;
      aside.style.width = obj.asideW;
    },
  },

3、通过commit触发 mutations里的方法setMainSize

methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
      console.log(this.isCollapse);
      if (this.isCollapse) {
        this.isfold = "el-icon-s-unfold";
        this.$store.commit("setMainSize", {
          /* width: "95%", */
          left: 64+'px',
          asideW: 65+'px',
        });
      } else {
        this.isfold = "el-icon-s-fold";
        this.$store.commit("setMainSize", {
         /*  width: "84%", */
          left: 300+'px',
          asideW: 301+'px',
        });
      }
    },
  },