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(,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
- 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