How to do simple state management with components? - vue.js

Question

Vue documentation gives an example of simple state management, for a single-file app:
const sourceOfTruth = {}
const vmA = new Vue({
data: sourceOfTruth
})
const vmB = new Vue({
data: sourceOfTruth
})
How to use the same mechanism for components?
I tried to move this concept of a minimal state manager to components in a codesandbox.io sandbox. It did not work and the more meaningful error, I believe, is
The "data" option should be a function that returns a per-instance value in component definitions.
Does this mean that components must be completely standalone and cannot rely on data managed outside of them?

Answer 1

try this Sandbox updated
in dataMaster.js
var store = {
state: {
message: "Hello!"
}
};
module.exports = store;
and component.vue
<template>
<div>
<h1>{{sharedState}}</h1>
</div>
</template>
<script>
import store from "./dataMaster";
export default {
name: "HelloWorld",
data() {
return {
privateState: {},
sharedState: store.state
};
}
};
</script>

Answer 2

The "data" option should be a function that returns a per-instance value in component definitions
It means that the data property you define in the component must be a function, and that function should return a per-instance value. You should, not any must here, and it can be tricked.
About the error, you got the error not because of state management, but because you forgot to export the function in dataMaster.js, so you couldn't import and use it in HelloWorld.vue. You got the error because you didn't return a function, that was the function part, not per-instance or anything related to state management.
To do the trick that I think you want, here it is: https://codesandbox.io/s/unruffled-carson-l3oui. You change the same source of truth directly from components, yet without tools like VueX or something. But it's tricky and is exactly what the error try to avoid, return a per-instance value. I don't know what the advantages and disadvantages of it yet, but at the end of the day, I think to do state management, we should use the standard recommended way from the prior people, like VueX, etc, just choose one from tons of them.
// dataMaster.js
const data = {
msg: "hello From dataMaster"
};
export default function dataMaster() {
return data // this is not "per-instance", they're the same across all instances
}
//Hello.vue
<template>
<div>
{{msg}}
<button #click="change">Change</button>
</div>
</template>
<script>
import dataMaster from "./dataMaster.js";
export default {
name: "HelloWorld",
data: dataMaster,
methods: {
change() {
this.msg = this.msg === "message1" ? "message2" : "message1";
}
}
};
</script>

Answer 3

"data" option should be a function, cause pure object could make data mess up. e.g when "sourceOfTruth" modified by componentA but you are focus on componentB, and you will confused. so please use "vuex" or "eventbus".

Answer 4

If you want to manage all data from global state. you should search and learn Vuex and Store Management.
Maybe using "Event Bus" is better for you example.
And you're wrong with this code, we always need to export the code.
export default function dataMaster() {
return {
msg: "hello from dataMaster"
};
}