vuex最简教程

原理篇

https://segmentfault.com/a/1190000015782272

对于不想去看实现的原理的，

首先在src中新建store目录，添加index.js文件，内容如下

import Vue from 'vue'
import Vuex from 'vuex'
// 修改state时在console打印，便于调试
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

const state = {

  showSearchName:true
}
const getters = {
   isShow: state => state.showSearchName
}
const mutations = {

  setShow:(state,showSearchName) => {
    state.showSearchName=!showSearchName
  }
}
// const actions = {}

export default new Vuex.Store({
  state,
  getters,
  mutations,
  // actions,
  // 严格模式，非法修改state时报错
  strict: false,
  plugins: debug ? [createLogger()] : []
})

其中getter方法，与mutations方法对应获取/修改全局变量的方法，这个要自己设置

state中存储全局变量，也需要自己设置

然后再main.js红引入

import store from './store'//引入store

然后就可以拿到全局变量与修改了，

获取

this.$store.getters.isShow 这个方法和index里面的一致

修改，修改的实现在mutations中

this.$store.commit('setShow',this.$store.getters.isShow)