In "vue2", the responsive state must be attached to the component, so there is a need to use "vuex".?
In "vue3", in the new "Vue Composition API", it is possible to use responsive state outside of components.
in "vue3",It is no longer necessary to use State Management library like "vuex" .?
Why does vuex make simple things complicated?
import { ref } from "vue";
/**
* @param {number} init
* @returns{{
get: () => number;
inc: () => void;
dec: () => void;
}}
*/
function create(init) {
/**
* @type{{value:number}}
*/
const state = ref(init);
const get = () => state.value;
const inc = () => {
state.value++;
};
const dec = () => {
state.value--;
};
return { get, inc, dec };
}
const count = create(0);
export default {
setup() {
return {};
},
render() {
return (
<div>
<p>count:{count.get()}</p>
<button onclick={count.inc}>increase</button>
<button onclick={count.dec}>decrease</button>
</div>
);
},
};
Your example works in that use case, and you are free to implement your code like that. However, that will probably wouldn't work on SSR in the real-world use case, and it will also not work outside of setup hook, so you can't use it with the option syntax component.
Vuex is there to support global state management throughout the whole Vue use case and its ecosystem, covering things like SSR and composition api, option api, and such.
By the way, it has nothing to do with Vue 3 reactivity system. You can do pretty much the same with Vue 2 using the global Vue instance. It's even documented in the docs.
Why does vuex make simple things complicated?
I understand you feel a little overwhelming about the current Vuex implementation. We're trying hard to make Vuex better in the next iteration so please stay tuned 🙌
Most helpful comment
Your example works in that use case, and you are free to implement your code like that. However, that will probably wouldn't work on SSR in the real-world use case, and it will also not work outside of
setuphook, so you can't use it with the option syntax component.Vuex is there to support global state management throughout the whole Vue use case and its ecosystem, covering things like SSR and composition api, option api, and such.
By the way, it has nothing to do with Vue 3 reactivity system. You can do pretty much the same with Vue 2 using the global Vue instance. It's even documented in the docs.
I understand you feel a little overwhelming about the current Vuex implementation. We're trying hard to make Vuex better in the next iteration so please stay tuned 🙌