Vue-next: in "vue3",It is no longer necessary to use State Management library like "vuex" .?

Created on 17 Apr 2020  Â·  1Comment  Â·  Source: vuejs/vue-next

What problem does this feature solve?

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?

What does the proposed API look like?

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>
        );
    },
};

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 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 🙌

>All comments

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 🙌

Was this page helpful?
0 / 5 - 0 ratings

Related issues

corkt picture corkt  Â·  4Comments

ConradSollitt picture ConradSollitt  Â·  4Comments

Jexordexan picture Jexordexan  Â·  4Comments

HakamFostok picture HakamFostok  Â·  3Comments

mika76 picture mika76  Â·  3Comments