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 send an object with call function #126

Closed ghost closed 3 years ago

ghost commented 3 years ago

In app.vue file I have data which names "test" I want to send this data inside changeMsg function in my store.js How I send this data ? Can you help me?

App.vue

<template>
  <div id="app">
    <h1>{{message}}</h1>
    <button @click="changeMsg">Test</button>
  </div>
</template>

<script>
import { get, call } from 'vuex-pathify'

export default {
  data() {
    return {
      test: "Demre"
    }
  },
  computed: {
    message: get('greeting'),
  },
  methods: call(['changeMsg'])
}

</script>

<style>

</style>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import pathify, { make } from 'vuex-pathify'

// properties
const state = {
    greeting: 'Hello',
    name: 'World'
}

const getters = {}

const actions = {
    changeMsg (test) {
        state.name="123"
        console.log(state.name)
        console.log(test)
    }
}

const mutations = make.mutations(state)

// store
Vue.use(Vuex)
export default new Vuex.Store({

    // use the plugin
    plugins: [
        pathify.plugin
    ],

    // properties
    state,
    getters,
    actions,
    mutations,
})
davestewart commented 3 years ago
<button @click="changeMsg(test)">Test</button>
davestewart commented 3 years ago

Though, not 100% sure if you are asking that, or just trying to work out how to sync data.

If you just want to sync, use sync():

<template>
  <div id="app">
    <textarea v-model="message" />
    <pre>{{ message }}</pre>
  </div>
</template>

<script>
import { sync } from 'vuex-pathify'

export default {
  computed: {
    message: sync('message'),
  },
}

</script>
import Vue from 'vue'
import Vuex from 'vuex'
import pathify, { make } from 'vuex-pathify'

Vue.use(Vuex)

const state = {
    message: '',
}

const mutations = make.mutations(state)

export default new Vuex.Store({
    plugins: [
        pathify.plugin
    ],
    state,
    mutations,
})

If you want to submit after the local data is edited, then use call() (or just this.$store.dispatch(..., data))