created之后commit改变state值,但是拿不到改变的第一个state值,求解.

Question

created之后commit改变state值,但是拿不到改变的第一个state值,求解.

发布于
2018-07-27

需求描述

Header和Management两个组件,目录结构如下所示.Header.vue文件里有一个select元素,select的值是从后台动态获取的.在获取到projectList之后将commit(projectId)到vuex,改变vuex中的默认state.selectedProjectInfo.projectId这个值,然后Management.vue文件拿到刚加载完改变的第一个projectId.随着select下拉列表的选择继续改变获取到对应的projectId

问题描述

在钩子函数created之后发出到vuex的commit是有将第一个projectId带到vuex,但是Management文件拿到的还是vuex设置的state.selectedProjectInfo.projectId初始值,Header触发change事件之后,Management能拿到正确的对应的projectId.

总结一下:兄弟组件Management文件没法正确拿到Header组件的第一个改变的state值!

目录结构


│  ├─components                        
│  │  │ Header.vue                                     // 头部组件(公用组件)
│  │  │ Sidebar.vue                                 // 侧边栏组件(公用组件)
│  │  │   
│  │  ├─table                                    
│  │  │      Management.vue                         // 管理模块
│  │              
│  ├─router
│  │      index.js                                     // vue路由配置文件
│  │      
│  └─store
│      │  index.js                                 // vuex

Header.vue

// select元素

      <select name="" id="" @change="projectListChange" v-model="projectId">
        <option :value="item.projectId" v-for="item in projectList" :key="item.value">
          {{item.projectName}}
        </option>
      </select>


    data() {
      return {
        projectList: [{}],
        projectId: 0
      }
    },
    methods: {
      ...mapActions([
        'changeProjectInfo'
      ]),
      getProjectData() {
        this.$http.get('/purchase/foundation/getProjectList')
          .then((res) => {
            let projectList = res['data']['data'];
            if (res['data']['returnCode'] === 0) {
             this.projectList = projectList;
             this.projectId = res.data.data[0]['projectId'];
             console.log(this.projectId); // 有值146798161
             this.changeProjectInfo(this.projectId);
            }
          })
          .catch(function (err) {
            console.log(err);
          })
      }
    },
    created() {
      this.getProjectData();
    }

vuex中的store/index.js文件


var state = {
  selectedProjectInfo:{
    projectId:0
  }
};

const actions = {
  changeProjectInfo(context,selectedProjectInfo){
    console.log("actions commit= "+selectedProjectInfo);
    context.commit('CHANGEPROJECTINFO',selectedProjectInfo);
    console.log("actions state= "+state.selectedProjectInfo.projectId);
  }
};

const mutations = {
  CHANGEPROJECTINFO(state,projectId){
    state.selectedProjectInfo.projectId = projectId;
    console.log("mutations= "+state.selectedProjectInfo.projectId)
  }
};

const getters = {
  getProjectInfo(state){
    console.log("getters= "+state.selectedProjectInfo.projectId)
    return state.selectedProjectInfo.projectId
  }
};

export default({
  state,
  actions,
  mutations,
  getters
})

Management.vue文件

    data(){
        return {
            changedProjectId:222
        }
    },
    computed:{
      ...mapGetters([
        'getProjectInfo'
      ])
    },
    getTableData() {
        console.log("Management获取state值"+this.getProjectInfo); // 值是0
        console.log("Management获取changedProjectId值"+this.changedProjectId); // 值为当前组件默认的222
    },
    watch:{
      getProjectInfo(newProjectId){
        this.changedProjectId = newProjectId;  // 下拉选择框改变之后可以正确拿到改变的值
      }
    },
    created(){
      console.log("Management获取state值:"+this.getProjectInfo); // 值是0
      this.getTableData();
    }