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?

Vue.js vuex

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){

}

}

Previous: Ask SQL SERVER to extract the latest records according to the specified conditions.

Next: How does echarts draw a map to connect with legend?

Use vuex, to update the state, in stores. Why is it not updated in the view?
vue a rookie to solve, the code is component .vue <template> <div class="top-ad-section" v-bind:class="{ show: isShowAdStatus }">< div> < template> <script> export default { mounted() { setT...

Vue.js vuex

Feb.27,2021
After vuex uses module, the store.state. cannot be obtained from the beforeEnter in the routing file.
try to get store data in the route file, but the undefined vuexmodule modulestore is displayed. ...

Vue.js vuex vue-router

Feb.27,2021
How to get vuex data in created cycle?
after searching around, I didn t see this tutorial. put the vuex data into the data before the dom is mounted, but the data is not available in the created. ...

Vue.js vuex

Feb.28,2021
VUEX assignment error report, but does not affect the use?
...

Vue.js vuex

Mar.01,2021
Using action to pass parameters to report errors in vuex
the configuration related to vuex is as follows < hr > const mutations = { incrementment( state,payload ){ state.numb+= payload.amount; }, reducement( state ){ state.numb-- ; }, [SOME_MUTATION](){ state.numb+...

Vue.js vuex

Mar.01,2021
I want to use some of the constants defined in state to assign default values to the drop-down box and v-model this variable in the data of the component, what should I do?
I m going to assign the default value of 1 to the value of the drop-down box and bind this variable; <select v-model= selectValue >< select> but just let data(){ return{ selectValue:1 } } this type of writing is not readable, so I ...

Vue.js vuex javascript es6 html5

Mar.03,2021
Variables in Vue are rendered successfully, but input mutation is undefined?
data file mutations.js item.textdelete iditem.textpropundefined click question and answer:, mutation API accepts only two parameters ...

Vue.js vuex

Mar.03,2021
Vue refresh component, which refers to how another component refreshes the referenced component, or destroys it when another component calls another component. The simple point is that you need to refresh the current component.
I have referenced another component in one component. What can I do to refresh the referenced component when a value changes? or call the destroy method of another component in the current component ...

Vue.js vuex vue-router

Mar.03,2021
Nuxt.js, how to call the mutation method in store in other js files?
I need the js file in plugins or assets to call the mutation method add . How can I call it correctly? ...

Nuxt.js vue.js vuex

Mar.04,2021
Vuex and browser caching
The main purpose of Vuex is to share and manage data, so why not just use browser caching? what is the fundamental difference between Vuex and browser caching strategy? the data flow in the Vuex state repository is unidirectional Synchronize, so why...

Cache vue.js vuex

Mar.05,2021
Why does the Vuex asynchronous method still work in mutations?
the official document says that asynchronous modification of the state will not take effect: https: vuex.vuejs.org zh-cn . but the following code does change the value: mutations: { increment: (state)=>{ window.fetch( https: jsonp...

Vue.js vuex

Mar.09,2021
How to understand the sentence that we can use the mapState helper function to help us generate calculation properties so that you can press the key a few times less?
in Vuex State document : when a component needs to acquire multiple states, declaring these states as computational properties can be repetitive and redundant. To solve this problem, we can use the mapState helper function to help us generate computa...

Vue.js vuex

Mar.11,2021
Methods can prompt undefined when $store.state, calls a method in methods in mounted.
A method in methods is called in mounted in the same component. but the use of error-free mounted in methods prompts $store is undefine as soon as it is called. Excuse me, what s going on? ...

Vue.js vuex

Mar.17,2021
About the problem of dynamic parameter transfer in css?
<div v-for="src of item.images" class="img2" :style="{backgroundImage: url( +src+ ) }">< div> item.images=[ http: xx 1.jpg , http: xx 2.jpg , http: xx 3.jpg ]; srcbackgroundImageurl : ...

Css css3 vue.js vuex

Mar.18,2021
The axios encapsulated by vue refers to vuex store and reports an error undefined.
Let s talk about the directory structure first: src api login.js store getters.js index.js modules user.js utils request.js axios the problem is that now I want to use vuex, in request.js, but after I intro...

Vue.js vuex axios javascript

Mar.19,2021
Apart from vuex, how can you easily set and get global variables in mpvue?
requirements: in the original Mini Program, the setting and acquisition of the user s openId was accomplished through the operation of App.gloabalData . Now using mpvue to develop a new Mini Program, how to deal with this kind of data that needs to b...

Vue.js vuex mpvue

Mar.20,2021
Get the getters,Cannot read property 'getters' of undefined of store
uses the login permission judgment in vue-element-admin, which is basically introduced and loaded according to it, but it still prompts you to report an error main.js . import Vue from vue import App from . App import router from . router i...

Javascript es6 vue.js vuex

Mar.21,2021
Vuex and computed sometimes work, sometimes they don't update the page.
1. Two identical functions, same method, one valid, one invalid 2. Invalid code: <Row :gutter="10" style="margin-top: 10px" v-for="(col, index) in categoryList" :key="index"> <Col span="4"...

Vue.js vuex

Mar.21,2021
The problem of data loss after vuex refresh
vue project, after refreshing, the data in store is lost. I use localstorage to store it. When I take it out, I find that the page will report an error. I don t know why. Code: login: methods: { ...mapMutations([ SET_USER , ]), ...

Vue.js vuex

Mar.22,2021
After the vue login is successfully redirected, the registration status of the home login has not changed.
after the login is successful, save the login information to localStorage. The login registration should be changed to the user name on the home page after login, and the drop-down selection should be included. In the component, I judge which part of th...

Vue.js vuex

Mar.23,2021