vuex和 redux区别

修改SET_USER_INFO方法:

this.$store.commit("SET_USER_INFO", {
        deptName: "信息技术部",
        inUserName: "dj2",
        name: "盯盯",
        reportObject: "wdld1",
        serialNo: 52,
        status: 1,
        userName: "wdj2",
        workEmail: "dingjie@landspace.com"
      });

监听变化

watch: {
      "$store.state.userInfo.name":{
        handler(newval, olval) {
          this.username = newval;
      },
       immediate: true
      }
  },

vuex复习
一、map*
mapState mapGetters

{{num}}

{{getNum}}

mapMutation mapActions

{{num}}

{{getNum}}

二、state
类似于组件的data，存储数据。页面刷新就没了

三、mutations
通过commit修改state数据
mutations使用this.$store.commit(‘mutation方法名’)提交mutation；

四、action
通过dispatch监听事件，然后再修改mutation里面的方法，最终修改state数据

actions使用this.$store.dispatch(‘action方法名’)分发action

1.state 存储状态

2.getters 是状态的计算属性，状态改变自动会重新计算 。

3.mutations 同步更改状态。 commit

4.actions 发送异步请求，拿到数据 dispatch

五、module
把公共的状态按照模块进行划分
　　　　1、每个模块都相当于一个小型的Vuex
　　　　2、每个模块里面都会有state getters actions mutations
　　　　3、切记在导出模块的时候 加一个 namespaced:true 主要的作用是将每个模块都有独立命名空间

六、vuex刷新后数据丢失
可以存在sessionStorage

app.vue中设置全局

//===========================下面是解决刷新页面丢失vuex数据
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state));
    });
  }

或者用vuex-alone插件