vue安装store并定义全局变量(IDEA版)
1、 首先需要安装store①安装之前先将镜像源换成淘宝的,这样会下载的更快一点 设置过程如下(此过程为永久设置)首先打开命令行,建议直接在IDEA最下边进行:输入以下命令:npm config set registry http://registry.npm.taobao.org②检查转换镜像源是否成功输入如下命令:npm config get registry③下载store输入以下命令:np
·
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);
这样子就可以了!
更多推荐
已为社区贡献2条内容
所有评论(0)