原理篇
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)