使用vuex原因是,可以集中存储所有组件的所有状态, 解决多个组件共享数据的问题。就是进行数据共享。
1.安装vuex
npm install --save vuex
2.创建store目录,并在此目录添加store.js
import Vue from "vue"
import vuex from "vuex"
Vue.use(vuex)
let store = new vuex.Store({
//通过state添加参数
state: {
//注册两个参数
schoolId:'',
token:'',
},
//通过mutations设置参数的值
mutations:{
setSchoolId(state, data){
state.schoolId = data;
},
setToken(state, data){
state.token = data;
}
},
//通过getters获取参数的值
getters: {
getSchoolId(state) {
return state.schoolId;
},
getToken(state){
return state.token;
}
}
})
export default store
3.在main.js中添加store.js
import Vue from 'vue'
import App from './App'
import store from './store/store'
Vue.config.productionTip = false
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
4.使用
//设置值
this.$store.commit("setToken",token);
this.$store.commit("setSchoolId",schoolId)
//获取值
this.$store.getters.getSchoolId
this.$store.getters.getToken
github上有我更多的笔记:Raray-chuan (兮川) · GitHub,欢迎stars与following,如果有问题可以在issue中向我咨询
关注我的公众号,获取更多关于后端、大数据的知识