vuex, a powerful tool for vue global variable management and state update

Vuex is an officially provided tool for managing global variables, mainly for communication between components, and at the same time to minimize the coupling of components, as long as it is written according to the official format.

1. Installation

npm install vuex -S

2. Configuration

Then import it in main.js

import store from './vuex/store'

new Vue({Remember to write store inside,

3, the core warehouse store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 这里定义初始值
let state = {
  name:"",
  
};

const mutations = {
   setName(context,msg){
     context.custid = msg;
   },
  
};

// 事件触发后的逻辑操作
// 参数为事件函数
const actions = {

};

// 返回改变后的数值
const getters = {

};

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

4. Read the value in the store

computed: {
      author () {
        return this.$store.state.name
      }
    }

5. Change the value, the official recommended method

this.$store.commit('setName',"Jack");

setName should correspond to the method name in mutations in store