created之后commit改變state值,但是拿不到改變的第一個(gè)state值,求解.

需求描述

Header和Management兩個(gè)組件,目錄結(jié)構(gòu)如下所示.Header.vue文件里有一個(gè)select元素,select的值是從后臺(tái)動(dòng)態(tài)獲取的.在獲取到projectList之后將commit(projectId)到vuex,改變vuex中的默認(rèn)state.selectedProjectInfo.projectId這個(gè)值,然后Management.vue文件拿到剛加載完改變的第一個(gè)projectId.隨著select下拉列表的選擇繼續(xù)改變獲取到對(duì)應(yīng)的projectId

問(wèn)題描述

在鉤子函數(shù)created之后發(fā)出到vuex的commit是有將第一個(gè)projectId帶到vuex,但是Management文件拿到的還是vuex設(shè)置的state.selectedProjectInfo.projectId初始值,Header觸發(fā)change事件之后,Management能拿到正確的對(duì)應(yīng)的projectId.

總結(jié)一下:兄弟組件Management文件沒(méi)法正確拿到Header組件的第一個(gè)改變的state值!

目錄結(jié)構(gòu)


│  ├─components                        
│  │  │ Header.vue                                     // 頭部組件(公用組件)
│  │  │ Sidebar.vue                                 // 側(cè)邊欄組件(公用組件)
│  │  │   
│  │  ├─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); // 值為當(dāng)前組件默認(rèn)的222
    },
    watch:{
      getProjectInfo(newProjectId){
        this.changedProjectId = newProjectId;  // 下拉選擇框改變之后可以正確拿到改變的值
      }
    },
    created(){
      console.log("Management獲取state值:"+this.getProjectInfo); // 值是0
      this.getTableData();
    }