mapState,mapMutations的使用方式

组件上的引入:

import { mapState, mapMutations } from "vuex";

mapState使用有两种方式,如下

  computed: {
    lang_() {
      return this.$store.state.loginInfo.lang;   //附带上store的直接使用方式
    },
    //下述中的 ... 是拓展运算符
    // 使用 [] 是解构赋值

    ...mapState({
      lang: state => state.loginInfo.lang   //这是mapState的使用方式
    })
    //需要进一步处理的话,用下面方式写
    ...mapState({
      infoObj: state => {
        let info = state.accountInfo.infoObj;
        return self.formSexToStr(info);
      }
    }),
  },

mapActions和mapMutations使用方式都是一样的,如下,放到methods中

methods: {
    ...mapMutations(["SETLOGINSTATE", "setUserInfo"]),

    ...mapActions([
      'increment',            // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    ]),
    ...mapActions({
      add: 'increment'       // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
}

使用栗子,先是放入localStorage,后执行store里面定义的方法,从而改变state

//方法中要是有先存储,就不用这里
localStorage.setItem("infoObj", JSON.stringify(this.form));   
//存放到store
this.setUserInfo({ infoObj: this.form });

--by Affandi ⊙▽⊙