前端配置vuex及使用

这里就用那token来当示例

定义store.js文件

import Vue from "vue";

import Vuex from "vuex";

import router from 'vue-router'

Vue.use(Vuex);

// 用来存储数据

const state = {

  token: "",

};

// 响应组件中的事件

const actions = {

  setToken(content, value) {

    content.commit("setToken", value);

  },

};

// 操作数据

const mutations = {

  setToken(_, value) {

    this.state.token = value;

  },

};

// 用来将state数据进行加工

const getters = {

  getToken(state) {

    return state.token;

  },

};

// 新建并暴露store

export default new Vuex.Store({

  state,

  actions,

  mutations,

  getters,

});

配置main.js文件

import store from '@store/index';

new Vue({

  store,

}).$mount("#app");

使用
直接通过this调用$store就可以实现数据存储和获取

this.$store.dispatch("setToken", res.token);

this.$store.getters.getToken