Issue with import? about vue-object-merge HOT 4 CLOSED

How strange! Can you share some example code?

Theoretically, you should make changes to Vuex state in mutations, not in actions. Actions are for managing asynchronous activities that lead to mutations, such as making an API call that will return a result.

Here's an excerpt from my mutations.js file in one of my production systems using this utility. My actions commit this mutation with whatever changes they wish to make to the state, and it's all reactive.

import { stateMerge } from "vue-object-merge"

export default {
	MERGE: (state, data) => {
		stateMerge(state, data, null, true)
	},
}

from vue-object-merge.

I know, but mutations will probably be deprecated in the next version of Vuex: vuejs/vuex#1417

I've always found them useless anyway, so I don't enable the strict mode and I do everything in actions already.

There isn't much to demonstrate unfortunately, I have a js file with my actions

export const merge = (context, payload) => {
  [...]
  stateMerge(context.state.data, payload)
  [...]
}

and reactivity only works when I copy-paste the function in the same file instead of importing it :/ I've never seen that before.

from vue-object-merge.

I created a test in one of my apps, and could not reproduce the issue.

First, I created a file test.js:

import { stateMerge } from "vue-object-merge"
export const merge = (context, payload) => {
    stateMerge(context.state, payload)
}

Then, in my actions.js file:

import { merge } from "./test"
export default {
    testMergeState(context) {
        merge(context, {
            ui: {
                messages: [{ category: "success", title: "Merged state!", },],
            },
        })
    }
}

And finally, from one of my Vue pages:

testMergeState() {
    this.$store.dispatch("testMergeState")
}

This did exactly as expected -- in my state, it replaced the messages array in my ui state object without impacting other keys for ui. In my app, the "state.ui.messages" array is an array of messages appearing at the top of the screen, many API endpoints return success/error/etc. messages. The new message showed up instantly on-screen. I got a Vuex warning about making changes to state outside of a mutation, but it still allowed it.

The only thing different between our code is that you're mutating only within the "data" node of your state, and my merge function above operates directly at the state root level. But I also tried a version where merge() operates on state.ui and testMergeState passed a payload of messages:[...] and it still worked.

I think there's something else going on here. If you can create a simple test case, I'd be happy to look at it.

from vue-object-merge.

Sorry, forgot to reply. I'm using Quasar, I'll try to setup a test later.

from vue-object-merge.