Can not catch Vuex state change in my Vue component

Question

I have a Vuex store where I have a getter which works correctly and I can see the changes on the state. But if I call this getter as computed property in component it does not work. The value is still the same.

The store code looks like:

mutations: {
  UPDATE_SERVER_FILTERS(state, payload) {
    this._vm.$set(state, 'serverFilters', payload);
    //state.serverFilters = payload;  // Both patterns work
  },
  getters: {
    serverFilters(state) {
      return state.serverFilters;  // This works fine
    }
  }
}

The component code:

computed: {
  serverFilters() {
    return this.$store.getters[this.storeName + '/serverFilters'];
  },
}

Here is JSFiddle example https://jsfiddle.net/camo/je0gw9t3/4/ which works fine. And it is a problem cause in my project it does not work. I am prepared to die...

How can I solve it?

Comments are not for extended discussion; this conversation has been moved to chat. — Ryan M
– Ryan M ♦, Commented Apr 9, 2022 at 2:31
You can start solving it by providing stackoverflow.com/help/mcve that can reproduce the problem. Putting a bounty on a question that cannot be efficiently answered won't really help. — Estus Flask
– Estus Flask, Commented May 16, 2022 at 21:02

CodinCat · Accepted Answer · 2022-04-09 02:10:37Z

2

+50

In the most bottom part:

new Vue({
  store,
  el: '#example',
  data() {
    return {};
  },
  computed: {},
  methods: {
    changeFilters() {
      this.$store.dispatch(this.storeName + '/updateFilters');
      //                   ^^^^^^^^^^^^^^ there is no storeName 
    },
  },
});

The changeFilters method. You are using this.storeName, but there is no this.storeName! Just like the Child component, add storeName: 'a' to the data() then it should work.

https://jsfiddle.net/4yfv3w87/

Here is the debug process for your reference:

First open the Vue Devtools and switch to the timeline tab. And just click the button, you will see that there is no action is being fired. So the problem must be the one who dispatches the action. And then you will notice that the root component doesn't have a storeName.

So don't panic, just try to trace the code. It will only take a few minutes to find out the issue!

edited Apr 9, 2022 at 2:10

answered Apr 9, 2022 at 2:00

CodinCat

16k6 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

20 Comments

kissu Over a year ago

Having it all in a Codesandbox would be so much easier.

kissu Over a year ago

Not sure why you could not host it if you can send it as .zip. But yeah, let's go for the good old days of sharing code that way I guess.

kissu Over a year ago

You can check my face pretty much everywhere yeah. And contact me on twitter too (check my profile). Otherwise, why would you not share the public repo? (my email is in my profile description too)

kissu Over a year ago

Nope, the project is not runnable with what you sent me.

kissu Over a year ago

@Čamo yeah I've spent quite some time on it Tuesday. Checked some things that I thought may impact it. At the end, it's probably in the campaign store file, you may have a shallow copy while destructuring or alike. Didn't had more time to troubleshoot it further tho. Understanding the whole structure took me a bit of time and also, the fact that the whole object is not reactive at all was kinda a surprise. Could have moved faster but I've expected it to be a least a bit functional. Checking the apex of the namespace is probably the next step to go.

|

Mises · Accepted Answer · 2022-05-17 15:23:24Z

Computed properties might have problem to make an observer reference from returned value out of function. Instead of chaining getters and computed properties, why you don't use just getters or computed properties ? In my opinion, it's a bad practice to use them both, and I can't imagine a situation you need it. So if you need filter operations in many components, just make a getter and use getter in components instead of computed properties.

If you really want to chain them, try this:

new Vue({
    store,
    el: '#example',
    data() {
        return {
        storeName: 'a'
      }
    },
    computed: {
      filters() {
          get() {
              return this.$store.getters[`${this.storeName}/getFilters`];
          }
          set(newValue) {
              this.$store.dispatch(this.storeName + '/updateFilters');
          }
      },
    },
})

Comment please if someone check it. I don't know are it works.

Collectives™ on Stack Overflow

Can not catch Vuex state change in my Vue component

2 Answers 2

20 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

20 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related