vuex

As the name suggests, Vuex is a state management tool for VUE. Vue itself has store mode, in fact, is the global registration of an object, to achieve data sharing. == Suitable for small projects with little data. Vuex == is suitable for complex single-page applications, involving multi-level nesting, multi-level component transmission, and the processing of a state or interface by different views.

First, the five core of VUEX

Mutations 4.Actions 5.Module vuex four auxiliary functions mapState, mapGetters, mapMutations, mapActions

  • Demo Github address :github.com/babybrother…

  • Blog address: How to use auxiliary functions and their principle link blog.csdn.net/weixin_4364…

  • Gold digging address: how to use the auxiliary function and its principle link juejin.cn/post/684490…

Ii. Vuex workflow

1. Client action event, dispatch invokes an Action 2. 4. The corresponding view is rerendered after the state value is changed. 4

Here’s my flow chart

Graph LR A[client] -- event call dispatch --> B((Action)) C(State) -- State modify render --> A B -- commit A type --> D{Mutation} D -- matches the type operation state --> CCopy the code

Application in VUEX project

NPM installation == NPM == NPM install -g vue-cli vue init webpack Hello NPM install vuex –save ==yarn== yarn install -g vue-cli vue init webpack hello yarn add vuex

2. Create a store file. Create a store file in the SRC directory and create an index file in it

Create a basic vuex structure in store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)

export const store = new Vuex.Store({
        state : {
            count:6
        },
        getters: {doCount: (state, getters) = > {
                return getters.doneTodos.length
              },
              // The first argument to getters is state, and the second is getters itself
            doneTodos:(state) = >{
                return state.count+2}},mutations : {
            counts(state, v) {
                state.count = v;
            },
            addNum(state,v) {
                if(v){
                    state.count += v
                }else{
                    state.count ++
                }
            },
            reduceNum(state) {
                state.count --
            }
        },
        actions : {
            actionNumAdd(v) {
                // axios.get("/customer/user_info").then(res => {
                // v.commit(addNum, res.data);
                // });
                The first parameter is the name of the mutation, and the second parameter is the value passed
                v.commit('addNum'.6);
            },
            actionNumReduce(v) {
                // axios.get("/customer/user_info").then(res => {
                // v.commit(addNum, res.data);
                // });
                The first parameter is the name of the mutation, and the second parameter is the value passed

                v.commit('reduceNum'.6); }}})Copy the code

4. Next, call vuex

The following instance calls are all helper functions, based on the newly created app. vue instance

<template> <div id="app"> <input v-model="counts" /> <input v-model="getternum" /> <button @click="addnum1">mutation+1</button> <button @click="actionnum6">action+6</button> <img src="./assets/logo.png"> <router-view/> </div> </template> <script> import { mapState , mapMutations , mapActions , mapGetters } from 'vuex'; export default { data(){ return{ } }, computed:{ ... mapState({ counts:(state) => state.count }), ... mapGetters({ getternum:'doneTodos' }) }, methods:{ ... mapMutations({ addnum:'addNum' }), ... mapActions({ actionnum:'actionNumAdd' }), addnum1(){ this.addnum() }, actionnum6(){ this.actionnum() } } } </script>Copy the code

1. The initial value is count 6, call count = 6 2 with mapState. Call with mapGetters and base increment by 2, so the second count is 8 and does not affect the value of state

How are auxiliary functions used? And the principle of

  • Blog link: blog.csdn.net/weixin_4364…

  • Nuggets link: juejin.cn/post/684490…

In-depth study of vuEX state management split and modular processing

  • Blog link: blog.csdn.net/weixin_4364…

  • Nuggets link: juejin.cn/post/684490…

  • Demo Github address :github.com/babybrother…