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 call an action from Pathify? #98

Closed DarkLite1 closed 4 years ago

DarkLite1 commented 4 years ago

I',m a newbie and struggling with simply calling an action like other newbies. In a component it's really simple to use get and set. The make functions creates the necessayr getters and mutations whcih is really cool.

However, I created the following action myself:

export function updateTask ( context ) {
  console.log('update task action')
}

When I try to call this in my component it works fine like this:

methods: {
    ...mapActions('tasks', ['updateTask']),
}

But when I want to call it with Pathify it fails each time:

methods: {
    setTaskCompleted() {
      store.call('tasks/setUpdateTask!')
      store.call('tasks/setUpdateTask')
      this.store.call('tasks/setUpdateTask!')
      this.$store.call('tasks/setUpdateTask!')
     ....

I can't seem to duplicate the mapGetter call with Pathify.

DarkLite1 commented 4 years ago

I'm starting to get somewhere.

store/store-tasks/index.js

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'
import { make } from 'vuex-pathify'

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

store/store-tasks/actions.js

export function updateTask() {
  console.log('update task action')
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import pathify from 'vuex-pathify'

Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    strict: process.env.DEV,
    plugins: [pathify.plugin],
    modules: {
      tasks: require('./store-tasks').default,
    },
  })

  return Store
}

Component.vue

methods: {
    // ...mapActions('tasks', ['updateTask']),
    setTaskCompleted() {
      this.$store.set('tasks/UpdateTask!')

The error I get now is:

Pathify Unape to map path tasks/UpdateTask! - Did not find action or mutation named UpdateTask on module tasks. The strange thing is that the Vue developper tools also don't show this action:

image

DarkLite1 commented 4 years ago

OMG.... You're kidding me right?! It's case sensitive.... So I changed updateTask() to UpdateTask() and then it worked the same way.

I must have changed the case somewhere in between testing. I'm sorry, works as designed. Closing this one. Might help others with the same issue.

DarkLite1 commented 4 years ago

Solved, my bat