1、 首先需要安装store

①安装之前先将镜像源换成淘宝的,这样会下载的更快一点 设置过程如下(此过程为永久设置)

首先打开命令行,建议直接在IDEA最下边进行:
在这里插入图片描述
输入以下命令:

npm config set registry http://registry.npm.taobao.org

在这里插入图片描述

②检查转换镜像源是否成功

输入如下命令:

npm config get registry

在这里插入图片描述

③下载store

输入以下命令:

npm install --save vues

在这里插入图片描述
等待下载完成即可。

2、定义全局变量

①配置store

打开main.js文件,在上边加入

import store from './store'

在这里插入图片描述
在new Vue中加入store
在这里插入图片描述

②配置index.js

在src目录下创建store文件
在这里插入图片描述
在文件夹中创建index.js文件,将以下代码放入index.js文件中

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token:sessionStorage.getItem("token"),
    usInfo:JSON.parse(sessionStorage.getItem("usInfo"))
  },
  mutations: {
    SET_TOKEN:(state, token)=>{
      state.token = token;
      sessionStorage.setItem("token",token);
    },
    SET_USERINFO:(state, usInfo)=>{
      state.usInfo = JSON.stringify(usInfo);
      sessionStorage.setItem("usInfo",JSON.stringify(usInfo));
    },
    REMOVE_INFO:(state)=>{
      state.token = "";
      state.usInfo = {};
      sessionStorage.setItem("token","");
      sessionStorage.setItem("usInfo",JSON.stringify(""));
    }
  },
  getters:{
    getUser: state =>{
      return state.usInfo;
    },
    getToken:state =>{
      return state.token;
    },
  },
  actions: {

  },
  modules: {

  }
})

token:是用来判断的变量
usInfo:用来得到全局对象
再往下就是一些get,set方法,用来给token和usInfo赋值用的。

③接下来就可以自行使用了

举个例子:
比如我用在了登陆的界面,登陆完成后,将此用户的所有信息返回回来放到全局变量中。
返回回来的数据是res.data
将其赋值给全局变量的语句是

this.$store.commit("SET_USERINFO",res.data);

在这里插入图片描述

这样子就可以了!

Logo

前往低代码交流专区

更多推荐