A data access problem in vuex state

The structure of

vuex is like this

export default new Vuex.Store({
    state:{
        projects:[],
    },
    getters:{
        getAllProjs(state){
            return state.projects;
        },
        getProjectNamesById(state){
            return state.projects.map( proj => proj.name )
        }
    },
    mutations:{
        pushProjectsToStore(state,data){
            state.projects = data;
        },
    },
    actions:{
        pushProjectsToStore(){
            
        }
    }
})

when the parent component is created

beforeCreate(){
      this.$queryProject().then( res => this.$store.commit("pushProjectsToStore",res.data) )
  },

when subcomponents are instantiated

mounted () {
    //   
      this.projects = this.$store.getters.getAllProjs;
      this.projectNamesById = this.$store.getters.getProjectNamesById;
  },

and now there is a problem. The execution time of getAllProjs is before pushProjectsToStore, so we can"t get the data. How to solve this problem?

Mar.28,2021

it is suggested that if the calculation property is modified directly in the subcomponent, it will be updated directly, otherwise it will be more troublesome to listen for vuex changes.

computed: {
  projects() {
    return this.$store.getters.getAllProjs
  },
  projectNamesById() {
    return this.$store.getters.getProjectNamesById;
  }
},

use watch to listen for changes in the parent component, not in mounted.


computed: {

...mapGetters(["getAllProjs","getProjectNamesById"])

},
watch: {

getAllProjs(newVal,oldVal){
    console.log('vuex ',oldVal);
    console.log('vuex ',newVal);
},
getProjectNamesById(newVal,oldVal){

}

}

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e54ad5-452bb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e54ad5-452bb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?