Use of VUEX (State Management)

Configure vuEX

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

Vue.use(Vuex)

const modulea = {
    state: {
        name: "I am modulea"
    },
    mutations: {
        updataname(state, payload) {
            state.name = payload
        }
    },
    getters: {
        getfullname(state) {
            return state.name + "abcdefg"
        },
        getrootfullname(state, getters, rootState) { // The third argument gets the root state
            return getters.getfullname + "-- -- -- -- -- -" + rootState.counter
        }
    },
    actions: {
        updataaname(context, payload) {
            setTimeout(() = > {
                context.commit('updataname', payload)
            }, 1000); }}},const store = new Vuex.Store({

    // The default state value
    state: {
        counter: 1000.info: {
            name: "fhf".age: 18.address: "xysf"}},// Modify the state method
    mutations: { // Do not perform asynchronous operations
        / / method
        add(state) {
            state.counter++
        },
        jian(state) {
            state.counter--
        },
        //1. Payload of the accepted value
        // addmethod(state, count) {
        // state.counter += count
        // },
        //2. Accept special submission styles
        addmethod(state, payload) {
            state.counter += payload.count
            console.log(payload);
        },
        updatainfo(state) {

            state.info.name = "abc"

            Vue.set(state.info, "address"."Xinyang Normal School");
            Vue.delete(state.info, 'age');

            //mutations is asynchronous, devTools fails to trace (error code)
            // setTimeout(() => {
            // state.info.name = "abc"
            // }, 1000);}},// Equivalent to computing attributes computed
    getters: {
        doublecounter(state) {
            return state.counter * state.counter;
        },
        // The second argument is getters
        counterlength(state, getters) {
            return getters.doublecounter + 1 + state.counter;
        },
        mytool(state) {
            return function(n1, n2) {
                return n1 + n2
            }
        }
    },
    // Open mutations for asynchronous operations in actions
    actions: {
        / / the context context
        aupdatainfo(context, payload) {
            // setTimeout(() => {
            // context.commit("updatainfo")
            // console.log(payload);
            // }, 1000);
            return new Promise((resolve, rejet) = > {
                setTimeout(() = > {
                    context.commit("updatainfo")
                    console.log(payload);

                    resolve("News")},1000); })}},modules: {
        a: modulea //a will be added to state}})export default store
Copy the code

Use the VUEX

<template>
  <div id="app">
    <h2>vuex state:</h2>
    <p>{{ $store.state.counter }}</p>
    <button @click="jiann()">-</button>
    <button @click="addd()">+</button><br />

    <button @click="addmethod(5)">+ 5</button>
    <button @click="addmethod(10)">+ 10</button>

    <hello-vuex></hello-vuex>

    <h2>vuex getters:</h2>
    <p>{{ $store.getters.doublecounter }}</p>
    <p>{{ $store.getters.counterlength }}</p>
    <p>{{$store.getters. Mytool (1, 2)}}</p>

    <p>{{ $store.state.info }}</p>
    <button @click="updatainfo">Asynchronously updating information</button>

    <h2>vuex modules:</h2>
    <p>{{$store.state.a.name}}</p>
    <button @click="updataname()">Modify the name</button>
    <p>{{$store.getters.getfullname}}</p>
    <p>{{$store.getters.getrootfullname}}</p>
    <button @click="updataaname()">Asynchronously update a's name</button>
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex.vue";
export default {
  name: "App".components: {
    HelloVuex,
  },
  data() {
    return {};
  },
  methods: {
    addd() {
      // open mutations
      this.$store.commit("add");
    },
    jiann() {
      this.$store.commit("jian");
    },
    addmethod(count) {
      //1. The second function payload is passed
      // this.$store.commit("addmethod", count);
      //2. Special submission style
      this.$store.commit({
        type: "addmethod",
        count,
      });
    },
    updatainfo() {
      // this.$store.commit(" "); // Perform mutations normally
      // this.$store.dispatch("aupdatainfo", "123"); // Actions Asynchronously operate the dispatch() method
      this.$store.dispatch("aupdatainfo"."123").then( mes= > console.log(mes));
    },
    updataname(){
      this.$store.commit('updataname'."I'm the modified value.");
    },
    updataaname(){
      this.$store.dispatch("updataaname"."Asynchronously modify information")}}};</script>

<style></style>

Copy the code