What is Vuet.js?

Vuet.js is a tool to provide state management for vuue.js. Different from Vuex, it is a state management mode that advocates rule customization. Rules for state updates are written in advance, then injected into the component, and the state is updated according to scheduled rules. github:Vuet.js

Active and passive rules

Vuet.js has built-in common rules such as Life, manual, need, once and Route. Except manual rules, other rules are active update rules, which automatically trigger status update when certain conditions are reached.

life

Description: The state of the component is reset to its original state after the component’s beforeCreate hook is destroyed. The destroyed hook restores the state of the component to its original state. The LIFE rule is designed specifically for this scenario, and when a component is destroyed, the state of the module reverts to its initial state

manual

Manual rules allow various methods of updating module state to be managed centrally, waiting for the user to manually trigger the corresponding module update, such as the number of times the user clicks a button:


<! --index.html-->
<div id="app">
    {{ count }}
    <button @click="$count.plus">count</button>
</div>
<script>
// main.js
import Vue from 'vue'
import Vuet, { mapModules, mapRules } from 'vuet'

const vuet = new Vuet({
    modules: {
        count: {
            data () {
                return 0
            },
            manuals: {
                plus ({ state }) {
                    // Allow synchronous or asynchronous updates
                    this.setState(++state)
                }
            }
        }
    }
})

export default new Vue({
    el: '#app',
    vuet, // VuET instances are injected into Vue instances
    mixins: [
        mapModules({ count: 'count' }), // Components connect modules
        mapRules({
            manual: 'count' // Use manual rules to inject update methods for operation module data into components})]})</script>Copy the code

From the above code, you can see that Vuet.js is a natural support for multi-component communication, in short, it is simple and agile. The Manual rules inject a collection of methods into a component by default with the $module name, making the code more readable, easier to read, and more elegant.

need

The need rule is best used for scenarios where the beforeCreate hook is used to update the number of messages for each component

once

For the first time, the beforeCreate hook for each component will not be used for updates on any of the components. For example, for each of the components on the beforeCreate hook, the data for each of the components on the beforeCreate hook will not be used for updates on any of the components. The once rule will save you unnecessary requests and help you optimize your application

route

Ha ha, this is a bit too long, and I will explain it in the opening article next time.

conclusion

Vuet allows you to improve your development efficiency by encapsulating regular status updates into a rule, such as the need to update messages to the server on a regular basis. This is also a rule. Next time we have time, we can write such a rule.