davestewart / vuex-pathify

Vue / Vuex plugin providing a unified path syntax to Vuex stores
https://davestewart.github.io/vuex-pathify
MIT License
1.37k stars 57 forks source link

How to modify subproperties? #99

Closed DarkLite1 closed 4 years ago

DarkLite1 commented 4 years ago

I have a button on my component like this:

<q-btn @click="updateValue">test</q-btn>
  methods: {
    updateValue() {
      this.$store.set("tasks/tasks@ID1.completed", true);
    }
  }

store/tasks/state.js

export default function () {
  return {
    tasks: {
      'ID1': {
        name: "Go to shop",
        completed: false,
      },
      'ID2': {
        name: "Get bananas",
        completed: false,
      }

/store/tasks/index.js

import { make } from 'vuex-pathify'

export default {
  namespaced: true,
  getters,
  mutations: {
    ...make.mutations,
    ...mutations
  },
  actions,
  state
}

This would mean that the mutation SET_STATE should be created automatically by the helper. However, when I click on the button to set the value completed for the object ID1 the following error is thrown:

Unable to map path tasks/tasks@ID1.completed - Did not find action setTasks or mutation SET_TASKS on module tasks.

I have no pathify specific config. so I would expect that the default value for deep which is 1 would allow the mutation of a sub property. So there's probably something wrong with my syntax. Thank you for having a look.

Side note, the following works fine:

this.$store.get("tasks/tasks@ID1.completed")
DarkLite1 commented 4 years ago

Fixed, I was missing the state as argument on the make.mutations:

mutations: {
    ...make.mutations(state),
    ...mutations
  },