Vue之 vuex

使用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中向我咨询

关注我的公众号，获取更多关于后端、大数据的知识