美文网首页
详解VUEX

详解VUEX

作者: 嘤夏影 | 来源:发表于2018-12-11 10:59 被阅读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里面以便在各页面使用
             })
        }
      }
    })
    

    相关文章

      网友评论

          本文标题:详解VUEX

          本文链接:https://www.haomeiwen.com/subject/ffqshqtx.html