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 = {

const mutations = {
        state.dyrouter = value
const getters = {
    dyrouter: state => state.dyrouter,
const actions = {        //Asynchronous write, return promise object
        return new Promise(resolve => {

export default new Vuex.Store({

Screenshot reference

Introduction in vue

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

new Vue({
  el: '#app',
  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: {

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