临海app开发_商洛网络推广公司_百度推广账号怎么申请_东莞seo广告宣传

 安装

vscode中新建终端安装vuex。由于vue2不能使用vuex4的版本，所以在安装时需要指定版本3

npm i vuex@3

 配置

步骤一：新建文件夹store，文件夹下新建index.js文件

步骤二：index.js中完成配置

inde.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import notify from './modules/notify'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'Vue.use(Vuex)const store = new Vuex.Store({modules: {app,user,notify,tagsView,permission,settings},getters
})export default store

步骤三：main.js中引入 

import Vue from 'vue'
import App from './App.vue'
import store from './store/index';Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

 使用

user.js

import {login, logout, getInfo} from '@/api/login'
import {getToken, setToken, removeToken, getTokenSourceType, removeTokenSourceType} from '@/utils/auth'const user = {state: {token: getToken(),name: '',nickname: '',avatar: '',roles: [],permissions: [],userInfo:{},deptCode},mutations: {SET_TOKEN: (state, token) => {state.token = token},SET_NAME: (state, name) => {state.name = name},SET_NICKNAME: (state, nickname) => {state.nickname = nickname},SET_DEPTCODE: (state, deptCode) => {state.deptCode = deptCode},SET_AVATAR: (state, avatar) => {state.avatar = avatar},SET_ROLES: (state, roles) => {state.roles = roles},SET_PERMISSIONS: (state, permissions) => {state.permissions = permissions},SET_USERINFO: (state, userInfo) => {state.userInfo = userInfo}},actions: {// 登录Login({ commit }, userInfo) {const username = userInfo.username.trim()const password = userInfo.passwordconst code = userInfo.codeconst uuid = userInfo.uuidconst tenantId = userInfo.tenantIdreturn new Promise((resolve, reject) => {login(username, password, code, uuid,tenantId).then(res => {setToken(res.data.token)commit('SET_TOKEN', res.data.token)resolve()}).catch(error => {reject(error)})})},// 获取用户信息GetInfo({ commit, state }) {return new Promise((resolve, reject) => {getInfo().then(res => {const user = res.data.userlet avatar = user.avatarif(!avatar || avatar == '') {avatar = require("@/assets/images/profile.jpeg");}if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组commit('SET_ROLES', res.data.roles)commit('SET_PERMISSIONS', res.data.permissions)} else {commit('SET_ROLES', ['ROLE_DEFAULT'])}commit('SET_USERINFO', user)commit('SET_NAME', user.userName)commit('SET_NICKNAME', user.nickName)commit('SET_DEPTCODE', user.dept.deptCode)commit('SET_AVATAR', avatar)resolve(res)}).catch(error => {reject(error)})})},// 退出系统LogOut({ commit, state }) {return new Promise((resolve, reject) => {logout(state.token).then(() => {commit('SET_TOKEN', '')commit('SET_ROLES', [])commit('SET_PERMISSIONS', [])removeToken()resolve()//统一登录退出到统一登陆页面，账号登录推出到账号登录页面let sourceType = getTokenSourceType();if(sourceType == "1"){removeTokenSourceType()window.location.href =  process.env.VUE_APP_CAS_LOGOUT_API}else {location.href = window.location.origin + "/loginBySelfAccount";}}).catch(error => {reject(error)})})},// 前端 登出FedLogOut({ commit }) {return new Promise(resolve => {commit('SET_TOKEN', '')commit('SET_ROLES', [])commit('SET_PERMISSIONS', [])removeToken()resolve()})}}
}export default user

getters.js

const getters = {sidebar: state => state.app.sidebar,size: state => state.app.size,device: state => state.app.device,visitedViews: state => state.tagsView.visitedViews,cachedViews: state => state.tagsView.cachedViews,token: state => state.user.token,avatar: state => state.user.avatar,name: state => state.user.name,nickname: state => state.user.nickname,deptCode: state => state.user.deptCode,introduction: state => state.user.introduction,userInfo: state => state.user.userInfo,roles: state => state.user.roles,permissions: state => state.user.permissions,notifyTotal: state => state.notify.notifyTotal,permission_routes: state => state.permission.routes,topbarRouters:state => state.permission.topbarRouters,defaultRoutes:state => state.permission.defaultRoutes,sidebarRouters:state => state.permission.sidebarRouters,
}
export default getters

使用

import { mapGetters } from "vuex";computed: {...mapGetters(["userInfo","deptCode"]),
}然后直接使用this.deptCode