Computed property not updating when using getters. but working well if access state value directly

vue’s Computed method is not updating when i am accessing the store state with getters. But if i access them directly then i get the desired result and component is updated.

Please see the code

export default {

  computed : {
      items(){
         let count = 0;
          this.$store.state.cart.map((product) => {
              count = count + product.count;
          })

          return count;
      },
      totalPrice(){

          let price = 0;
          this.$store.getters.cart.map((product) => {
              price = price + Number(product.count) * Number(product.price)
          })

          return price;
      }
  }

}

See that items property is changing whenever the the cart value in state is changed but if i use getters like in the totalCount property, that property is not updated hence the component is also updated.

I have checked dev-tools. getters value are updating correctly. Just that computed property is not updating when the getters value changed

Because of this i have many repeated code in my project as i can’t use the getters to its full potential.

what does that getter look like?

export const products = (state) => {
return state.products
}

export const cart = (state) => {
return state.cart
}

This looks all fine, it should work. You must have a different problem. Cn you share a runnable example?

i also cant use this.$store to access my store form my component.
I have to first import that store then use it as local data property

just like this

import store from ‘…/…/store/index’

export default {

name: ‘top-header’,
data(){
return {
‘store’ : store
}
},

Can this be the reason.

I am using both vuex and vue-router

have you added it to the options of your main instance?

new Vue({
  store: store,

  // ... other options.
})

That’s necessary to make this.$store work.

In general, it’s not a good idea to add the store (or any other complex class instance) to the reactive data. I doubt it’s the source of your problem, but it doesn’t help. As explained above, this.$store should be available if you did the setup right, but if that would not work, you dont have to add the store anyway, you can simply use it directly:

import store from ‘…/…/store/index’

export default {
  name: ‘top-header’,

  computed: {
    totalPrice(){

      let price = 0;
      store.getters.cart.map((product) => {
        price = price + Number(product.count) * Number(product.price)
      })

      return price;
    }
  }
},

My main.js


my store

also looking fine. This just gets weird and weirder…

See on this thread

He also cant use this.$store directly like my case.
I have used this solution as a workaround

I think this is related to the current version of vuex or vue

because i checked a project source file created by an instructor from udemy where he used this.$store and it is running well on my pc.

So i think this is related to current version of vuex or vue

I have used

$ npm install --global vue-cli

create a new project using the “webpack” template

$ vue init webpack my-project

install dependencies and go!

$ cd my-project
$ npm install
$ npm run dev

to create my project with vue-router

So i am just ok with installation. also added added vuex just like it is instructed

Do you do the same as the author in the issue you linked? create a new instance programmatically for a modal or something?

Because in that case, the store is missing because that new instance isn’t a child of the app’s component tree, and so it can’t “reach” the store in the app’s root component.

A simple fix is to define the parent component during instance creation:

const mymodal = new Vue({
  parent: this
  // other options.
})

No. i have used one single instance .

I just wanted to show you that there is also another user having problem accessing this.$store

May be i didn’t understand this case correctly :slight_smile:

I have just added the src folder.

https://drive.google.com/open?id=1Naleu1pJSjBpGpXlDiX6tG-AuYJr8762

It is a small project. But if you kindly have time to check if i have declared everything correctly i will be grateful to you .

The project is Ok with no error and giving result as it should be. But not the way vuex documentation wants it to be

Well, this works quite nicely, so there must be something different that you do and I don’ see:

please kindly check

Why are you doing this in your code

        return {
            'store' : store   // REMOVE THIS
        }
      },
      computed : {
          cart(){
              return this.store.state.cart // CHANGE THIS TO this.$store
          }
      },

Since you already added the store to your root instance via

  el: '#app',
  router,
  store,   // STORE ADDED HERE AT ROOT
  template: '<App/>',
  components: { App }
})

Remove your store from your reactive data property, and access the store via this.$store instead. You also do not need to import the storein every component since you can access it via this.$store

2 Likes

it turns out the issue is the installation.

When i install it using official CLI then i get package.json file where the script section contains


these packages

but in the example

the script section of package.json has this

and i get these two extra files in my build folder

If i use the second one and run npm install everything works fine and this.$store can be accessed.

Can someone tell me why is this happening and why i am not getting the second script settings when i am using Official CLI ?

Thanks in Advance

I made those changes to the official CLI- template. It would be very strange if that wa actually the reason. The implementation of those dev servers is nearly identical, and their code shouldn’T have anythign to do with vuex besides hot reloading, which doesn’t seem to be involved here - we just switched to one that is officially maintained by webpack so we don’t have to.

I will of course test this out though when I get home, can’t do it now.

If that problem is really what you describe it, it’s definitely unintended and needs a fix. So far, We haven’t gotten any bug reports besides yours though, and many, many people use this template with Vuex, so I have my doubts.

Will report back here.