vuex common practice code (synchronous + asynchronous)

vuex has been used in several projects of vue. To summarize, it is convenient to use

Warehouse writing (store.js)

1. Introduction

import Vue from 'vue'    //Introducing vue
import Vuex from 'vuex'    //Introducing vuex

Vue.use(Vuex)    //    vue using vuex

2. Storage writing

const state = {
    dyrouter:"",
}

const mutations = {
    SET_DYNAMIC_ROUTER(state,value){
        state.dyrouter = value
    },
}
const getters = {
    dyrouter: state => state.dyrouter,
}
const actions = {        //Asynchronous write, return promise object
    setdynamicrouter({commit},data){
        return new Promise(resolve => {
            commit('SET_DYNAMIC_ROUTER',data)
            resolve()
        })
    },
}

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

Screenshot reference

Introduction in vue

  1. main.js
import store from './store.js'    //See where the store files are imported

new Vue({
  el: '#app',
  router,
  store,                //Register components in vue
  components: { App },
  template: '<App/>'
})

vue uses warehouse to read and write (synchronous)

1. read

  • (method 1)
import { mapState } from 'vuex'        //Introducing mapState

computed: {
            ...mapState([
                "dyrouter"
            ]),
        },

You can bind the "dyrouter" parameter in the view directly

  • (method 2)
import store from '@/store'    //Introducing store

store.getters.dyrouter            //Read the dyrouter parameter in the store

2. write

import { mapMutations } from 'vuex'

methods: {
            ...mapMutations([                           //Introducing mapMutations
                "SET_DYNAMIC_ROUTER"                    //Introducing function method in vuex
            ]),
            this.SET_DYNAMIC_ROUTER("Parameters passed in");        //Use this method
}

vue write using warehouse (asynchronous)

import store from '@/store' / / import store

Store. Dispatch ('setdynamicroter ', passed in parameters'). Then (() = >{
            For the callback after saving, the parameter will not be empty here
        })

The above summary is only commonly used by individuals. Please refer to the official website for more details

Tags: Javascript Vue

Posted on Tue, 03 Dec 2019 02:17:03 -0500 by mgm_03