CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuex
Fereydoon
Fereydoon

Reputation: 81

is there a way to sync vue data values with global store state values?

I want to update my data values with values in the store.js, how it is possible? below code gave me blank page error.

App.vue

data() {
    return {
    storeState: store.state,
    Counter: this.storeState.Counter, 
    }
    }

store.js

   export const store = {
         state: {
         Counter: 1,
         }


     CounterUpdater(value) {
     this.state.Counter = (value);
     },
     }

Upvotes: 1

Views: 796

Answers (1)

Dan
Dan

Reputation: 63139

You can't refer to a data property (storeState) inside the data option that way, and you don't need it anyway. You should use computeds to sync component values with Vuex values. Remove both data values:

computed: {
  Counter() {
    return this.$store.state.Counter;
  }
}

Or use mapState:

import { mapState } from 'vuex'

computed: {
  Counter() {
    ...mapState(['Counter'])
  }
}

Also make sure your store mutation is inside mutations and using the proper syntax:

state: {
  Counter: 1
},
mutations: {
  CounterUpdater(state, value) {
     state.Counter = value;
  }
}

It's also recommended to name your variables according to camelCase convention (i.e. means lowercase counter in your code)

Upvotes: 1

Related Questions