1. 下载vuex npm install vuex --save
2. 在src下新建store文件夹,src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex); //引用Vuex
let state = { //声明变量state,用来存储状态值
count:1,
makserShow:false,
token:sessionStorage.getItem('token')
};
let mutations = { //运用mutations存储变量相关的方法
incCount(){
++state.count
}
};
const store = new Vuex.Store({ //实例化Vuex,挂载state、mutations
state,
mutations:mutations
});
export default store; //导出
3.在main.js中引入
//引入Vuex
import store from './store/index'
new Vue({
render: h => h(App),
store, //将store挂载到new Vue 实例中
}).$mount('#app');
4.在组件内使用
1. $store.state.makserShow //在HTML内使用
2. this.$store.state.maskerShow //在方法内使用,this根据具体指向
3. 在其他js文件内使用
import store from '../src/store/index'
store.state.makserShow = true;