详解VUEX

2018-12-11  本文已影响9人  嘤夏影

安装vuex

npm install vuex -s

安装完之后新建一个store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
// 整站公共变量和方法,如果是变量的话是不能在每个页面中使用的,刷新后就没了,常量就没有影响
export default new Vuex.Store({
  state: {
    constant:'这是一个公共的常量,在任何页面都可以使用',
    variable:''//这是变量
},
getters: {//用于暴露state的数据,在页面中可以使用this.$store.getters.showConstant来显示state中的constant
    showConstant(state){
      return state.constant
    }
  }
  mutations: {//修改state的值只能在mutations里面修改
    getConstant(state, data) {
      state.constant = data;
    },
   getVariable(state, data) {
      state.variable = data;
    }
  },
  actions: {//异步请求都是在actions里面
    toVariable(store, code) {
      axios
         .get('/hr/authorize', {
           params: {
             authcode: code,
            state: false
           }
         }).then(function (res) {
           store.commit('getVariable', res.empcode)//将请求到的数据存放在state里面以便在各页面使用
         })
    }
  }
})
上一篇下一篇

猜你喜欢

热点阅读