Reminder: Four books are given at the end of the article~
VuexIs a great state management library. It is very simple, and the Vueintegration is very good. Why would anyone give up Vuex? May be due to the upcoming release of Vue3version disclose the underlying response systems, and introduces a new method to build the application. The new responsive system is very powerful, and it can be used directly for centralized state management.
Do you need status sharing?
In some cases, data flow between multiple components becomes very difficult, so centralized state management is required. These situations include:
Multiple components use the same data
Deep nesting of components
If none of the above is true, the answer is simple, you no longer need state sharing.
But what if you have one of the above situations? The most straightforward answer is to use Vuex. This is a tried and tested solution, and it works well.
But what if you don't want to add other dependencies or find that the settings are too complicated? The new Vue3version, and Composition APIcan solve these problems through its built-in method.
New solution
The shared state must meet two conditions:
Responsive: When the state changes, the components that use them should also be updated
Availability: status can be accessed in any component
Responsive
Vue3It has disclosed its responsive system through numerous functions. You can use the reactivefunction to create a responsive variable (alternative is to reffunction).
import { reactive } from 'vue';
export const state = reactive({ counter: 0 });
From the reactivereturn of function Proxyobjects can be tracked object changes its properties. When used in a component template, when the response value changes, the component will re-render.
<template>
<div>{
{ state.counter }}</div>
<button type="button" @click="state.counter++">Increment</button>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({ counter: 0 });
return { state };
}
};
</script>
Availability
The above example is very useful for a single component, but other components cannot access the state. To overcome this problem, you can use provideand the injectways in which Vue 3applications can access any refers to.
import { reactive, provide, inject } from 'vue';
export const stateSymbol = Symbol('state');
export const createState = () => reactive({ counter: 0 });
export const useState = () => inject(stateSymbol);
export const provideState = () => provide(
stateSymbol,
createState()
);
When you Symbolpass a value to the key and providewhen the method of any subcomponents can use this value. SymbolWhen supplying and retrieving values, keyuse the same name.
This way, if you provide a value on the topmost component, it will be available in all components. In addition, it can also be called on the main application instance provide.
import { createApp, reactive } from 'vue';
import App from './App.vue';
import { stateSymbol, createState } from './store';
const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount('#app');
<script>
import { useState } from './state';
export default {
setup() {
return { state: useState() };
}
};
</script>
Make the code more robust
The above solution works, but there is a disadvantage: you don't know who modified what. The status can be changed directly without restriction.
You can use the readonlyfunction to wrap up the state to protect the state. It covers the Proxyvariables passed to the object, the proxy object to prevent any changes (to warn you when trying to modify). These changes can be handled by a separate function that can access writable storage.
import { reactive, readonly } from 'vue';
export const createStore = () => {
const state = reactive({ counter: 0 });
const increment = () => state.counter++;
return { increment, state: readonly(state) };
}
The external will only have access to the read-only state, and only exported functions can modify the writable state.
By protecting the state from unnecessary modifications, the new solution is relatively close Vuex.
to sum up
By using the Vue 3responsive system and dependency injection mechanism, we have transformed from the local state to be replaced in smaller applications Vuexcentralized state management.
Now we have; a state object, which is read-only and can respond to template changes. State can be modified only by a specific method, such as Vuexthe actions/mutations. You can use computedthe function to define other getter.
Vuex It has more functions, such as module processing, but sometimes we don't need it.
Learn more: https://dev.to/blacksonic/you-might-not-need-vuex-with-vue-3-52e4
Send book
Especially recommended "Vue.js Application Test"! Have to watch
"Vue.js Application Testing" is highly recommended by Evan You, the founder of Vue.js, and written by the author of the official Vue testing tool. It is a book about writing automated tests for Vue applications, suitable for different ability levels Vue application developer.
By writing Hacker News applications from scratch, this book elaborates on the testing skills applicable to Vue.js applications at each development stage, and fully demonstrates the necessary skills required to compile Vue.js application test suites.
Watch forwarding support author❤️