? ? ? ??
?
如果你之前使用过vue.js，你一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新
安装 : npm install vuex --save
使用:
然后我们在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：
Vuex有五个核心概念：
Vuex有五个核心概念：
state, getters, mutations, actions, modules。
1. state：vuex的基本数据，用来存储变量
2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
Vuex的用法：
新建vue项目testApp ==》 在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和 index.js ==》 store文件下建user.js
在项目的main.js中引入 import store from ‘./store’
在store文件下的index.js中引入
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
},
getters
})
export default store
在store文件下的getters.js中引入
const getters = {
self: state => state.user.self,
token: state => state.user.token,
currentCommunity: (state, getters) => {
let cid = getters.currentCommunityId
return getters.communities.filter(item => {
return item.communityId === cid
})
}
}
export default getters
在modules文件下的user.js写代码
const user = {
state:{
self: null,
token: '',
},
mutations:{
SET_SELF: (state, self) => {
state.self = self
},
SET_TOKEN: (state, token) => {
state.token = token
}
},
actions:{
login ({ commit }, res) {
commit('SET_SELF', res.self)
commit('SET_TOKEN', res.token
}
}
export default user
使用下面这两种方法存储数据：
dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)
commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 存储登录实例
模块store.js注意存储操作,登录后存储登录相关信息；
// 如store.js 定义各种变量并且导出
import {
validatenull
} from '@/util/validate'
import website from '@/const/website'
const keyName = website.key + '-';
/**
* 存储localStorage
*/
export const setStore = (params = {}) => {
let {
name,
content,
type,
} = params;
name = keyName + name
let obj = {
dataType: typeof (content),
content: content,
type: type,
datetime: new Date().getTime()
}
if (type) window.sessionStorage.setItem(name, JSON.stringify(obj));
else window.localStorage.setItem(name, JSON.stringify(obj));
}
/**
* 获取localStorage
*/
export const getStore = (params = {}) => {
let {
name,
debug
} = params;
name = keyName + name
let obj = {},
content;
obj = window.sessionStorage.getItem(name);
if (validatenull(obj)) obj = window.localStorage.getItem(name);
if (validatenull(obj)) return;
try {
obj = JSON.parse(obj);
} catch{
return obj;
}
if (debug) {
return obj;
}
if (obj.dataType == 'string') {
content = obj.content;
} else if (obj.dataType == 'number') {
content = Number(obj.content);
} else if (obj.dataType == 'boolean') {
content = eval(obj.content);
} else if (obj.dataType == 'object') {
content = obj.content;
}
return content;
}
/**
* 删除localStorage
*/
export const removeStore = (params = {}) => {
let {
name,
type
} = params;
name = keyName + name
if (type) {
window.sessionStorage.removeItem(name);
} else {
window.localStorage.removeItem(name);
}
}
/**
* 获取全部localStorage
*/
export const getAllStore = (params = {}) => {
let list = [];
let {
type
} = params;
if (type) {
for (let i = 0; i <= window.sessionStorage.length; i++) {
list.push({
name: window.sessionStorage.key(i),
content: getStore({
name: window.sessionStorage.key(i),
type: 'session'
})
})
}
} else {
for (let i = 0; i <= window.localStorage.length; i++) {
list.push({
name: window.localStorage.key(i),
content: getStore({
name: window.localStorage.key(i),
})
})
}
}
return list;
}
/**
* 清空全部localStorage
*/
export const clearStore = (params = {}) => {
let { type } = params;
if (type) {
window.sessionStorage.clear();
} else {
window.localStorage.clear()
}
}
模块二： 存储登录后的相关信息User
// 模块user.js组件主要存储后端返回的用户信息；
// 从后天获取数据后，该赋值的赋值,再导出该user对象
import {getStore, setStore} from '@/util/store'
import {isURL, validatenull} from '@/util/validate'
import {getUserInfo, loginByUsername, logout, refreshToken} from '@/api/login'
import {deepClone, encryption} from '@/util/util'
import webiste from '@/const/website'
import {getMenu} from '@/api/admin/menu'
function addPath(ele, first) {
const menu = webiste.menu
const propsConfig = menu.props
const propsDefault = {
label: propsConfig.label || 'name',
path: propsConfig.path || 'path',
icon: propsConfig.icon || 'icon',
children: propsConfig.children || 'children'
}
const icon = ele[propsDefault.icon]
ele[propsDefault.icon] = validatenull(icon) ? menu.iconDefault : icon
const isChild = ele[propsDefault.children] && ele[propsDefault.children].length !== 0
if (!isChild) ele[propsDefault.children] = []
if (!isChild && first && !isURL(ele[propsDefault.path])) {
ele[propsDefault.path] = ele[propsDefault.path] + '/index'
} else {
ele[propsDefault.children].forEach(child => {
addPath(child)
})
}
}
const user = {
state: {
userInfo: {},
permissions: {},
roles: [],
menu: getStore({
name: 'menu'
}) || [],
menuAll: [],
expires_in: getStore({
name: 'expires_in'
}) || '',
access_token: getStore({
name: 'access_token'
}) || '',
refresh_token: getStore({
name: 'refresh_token'
}) || ''
},
actions: {
// 根据用户名登录
LoginByUsername({commit}, userInfo) {
const user = encryption({
data: userInfo,
key: 'thanks,tpln',
param: ['']
})
return new Promise((resolve, reject) => {
loginByUsername(user.tenantId, user.username, user.password, user.code, user.randomStr).then(response => { // 请求登录
const data = response.data.data // 后端返回的登录信息
commit('SET_ACCESS_TOKEN', data.access_token)
commit('SET_REFRESH_TOKEN', data.refresh_token)
commit('SET_EXPIRES_IN', data.expires_in)
commit('CLEAR_LOCK')
resolve()
}).catch(error => {
reject(error)
})
})
},
GetUserInfo({commit}) {
return new Promise((resolve, reject) => {
getUserInfo().then((res) => {
const data = res.data.data || {}
commit('SET_USER_INFO', data.sysUser)
commit('SET_ROLES', data.roles || [])
commit('SET_PERMISSIONS', data.permissions || [])
resolve(data)
}).catch((err) => {
reject()
})
})
},
// 刷新token
RefreshToken({commit, state}) {
return new Promise((resolve, reject) => {
refreshToken(state.refresh_token).then(response => {
const data = response.data
commit('SET_ACCESS_TOKEN', data.access_token)
commit('SET_REFRESH_TOKEN', data.refresh_token)
commit('SET_EXPIRES_IN', data.expires_in)
commit('CLEAR_LOCK')
resolve()
}).catch(error => {
reject(error)
})
})
},
// 登出
LogOut({commit}) {
return new Promise((resolve, reject) => {
logout().then(() => {
commit('SET_MENU', [])
commit('SET_PERMISSIONS', [])
commit('SET_USER_INFO', {})
commit('SET_ACCESS_TOKEN', '')
commit('SET_REFRESH_TOKEN', '')
commit('SET_EXPIRES_IN', '')
commit('SET_ROLES', [])
commit('DEL_ALL_TAG')
commit('CLEAR_LOCK')
resolve()
}).catch(error => {
reject(error)
})
})
},
// 注销session
FedLogOut({commit}) {
return new Promise(resolve => {
commit('SET_MENU', [])
commit('SET_PERMISSIONS', [])
commit('SET_USER_INFO', {})
commit('SET_ACCESS_TOKEN', '')
commit('SET_REFRESH_TOKEN', '')
commit('SET_ROLES', [])
commit('DEL_ALL_TAG')
commit('CLEAR_LOCK')
resolve()
})
},
// 获取系统菜单
GetMenu({commit}, obj) {
return new Promise(resolve => {
getMenu(obj.id).then((res) => {
const data = res.data.data
let menu = deepClone(data)
menu.forEach(ele => {
addPath(ele)
})
let type = obj.type
commit('SET_MENU', {type, menu})
resolve(menu)
})
})
}
},
mutations: {
SET_ACCESS_TOKEN: (state, access_token) => {
state.access_token = access_token
setStore({
name: 'access_token',
content: state.access_token,
type: 'session'
})
},
SET_EXPIRES_IN: (state, expires_in) => {
state.expires_in = expires_in
setStore({
name: 'expires_in',
content: state.expires_in,
type: 'session'
})
},
SET_REFRESH_TOKEN: (state, rfToken) => {
state.refresh_token = rfToken
setStore({
name: 'refresh_token',
content: state.refresh_token,
type: 'session'
})
},
SET_USER_INFO: (state, userInfo) => {
state.userInfo = userInfo
},
SET_MENU: (state, params = {}) => {
let {menu, type} = params;
if (type !== false) state.menu = menu
setStore({
name: 'menu',
content: menu,
type: 'session'
})
},
SET_MENU_ALL: (state, menuAll) => {
state.menuAll = menuAll
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_PERMISSIONS: (state, permissions) => {
const list = {}
for (let i = 0; i < permissions.length; i++) {
list[permissions[i]] = true
}
state.permissions = list
}
}
}
export default user
// getters.js 处理各种常量的模块组件
const getters = {
tag: state => state.tags.tag,
website: state => state.common.website,
userInfo: state => state.user.userInfo,
theme: state => state.common.theme,
themeName: state => state.common.themeName,
isShade: state => state.common.isShade,
isCollapse: state => state.common.isCollapse,
keyCollapse: (state, getters) => getters.screen > 1 ? getters.isCollapse : false,
screen: state => state.common.screen,
isLock: state => state.common.isLock,
isFullScreen: state => state.common.isFullScreen,
lockPasswd: state => state.common.lockPasswd,
tagList: state => state.tags.tagList,
tagWel: state => state.tags.tagWel,
access_token: state => state.user.access_token,
refresh_token: state => state.user.refresh_token,
expires_in: state => state.user.expires_in,
roles: state => state.user.roles,
permissions: state => state.user.permissions,
menu: state => state.user.menu,
menuAll: state => state.user.menuAll
}
export default getters// common.js 常量的整合,并导出
import { getStore, removeStore, setStore } from '@/util/store'
import website from '@/const/website'
const common = {
state: {
isCollapse: false,
isFullScreen: false,
isShade: false,
screen: -1,
isLock: getStore({ name: 'isLock' }) || false,
showTag: true,
showCollapse: true,
showFullScren: true,
website: website
},
actions: {},
mutations: {
SET_SHADE: (state, active) => {
state.isShade = active
},
SET_COLLAPSE: (state) => {
state.isCollapse = !state.isCollapse
},
SET_FULLSCREN: (state) => {
state.isFullScreen = !state.isFullScreen
},
SET_SHOWCOLLAPSE: (state, active) => {
state.showCollapse = active
setStore({
name: 'showCollapse',
content: state.showCollapse
})
},
SET_SHOWTAG: (state, active) => {
state.showTag = active
setStore({
name: 'showTag',
content: state.showTag
})
},
SET_SHOWMENU: (state, active) => {
state.showMenu = active
setStore({
name: 'showMenu',
content: state.showMenu
})
},
SET_SHOWLOCK: (state, active) => {
state.showLock = active
setStore({
name: 'showLock',
content: state.showLock
})
},
SET_SHOWSEARCH: (state, active) => {
state.showSearch = active
setStore({
name: 'showSearch',
content: state.showSearch
})
},
SET_SHOWFULLSCREN: (state, active) => {
state.showFullScren = active
setStore({
name: 'showFullScren',
content: state.showFullScren
})
},
SET_SHOWDEBUG: (state, active) => {
state.showDebug = active
setStore({
name: 'showDebug',
content: state.showDebug
})
},
SET_SHOWTHEME: (state, active) => {
state.showTheme = active
setStore({
name: 'showTheme',
content: state.showTheme
})
},
SET_SHOWCOLOR: (state, active) => {
state.showColor = active
setStore({
name: 'showColor',
content: state.showColor
})
},
SET_LOCK: (state) => {
state.isLock = true
setStore({
name: 'isLock',
content: state.isLock,
type: 'session'
})
},
SET_SCREEN: (state, screen) => {
state.screen = screen
},
SET_THEME: (state, color) => {
state.theme = color
setStore({
name: 'theme',
content: state.theme
})
},
SET_THEME_NAME: (state, themeName) => {
state.themeName = themeName
setStore({
name: 'themeName',
content: state.themeName
})
},
SET_LOCK_PASSWD: (state, lockPasswd) => {
state.lockPasswd = lockPasswd
setStore({
name: 'lockPasswd',
content: state.lockPasswd,
type: 'session'
})
},
CLEAR_LOCK: (state) => {
state.isLock = false
state.lockPasswd = ''
removeStore({
name: 'lockPasswd'
})
removeStore({
name: 'isLock'
})
}
}
}
export default common
前面的实例，都是为改index.js准备的呀，重点来了：
// index.js |||||| 此处很好体现了Vuex的运用
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import common from './modules/common'
import enumItem from './modules/enumItem'
import tags from './modules/tags'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user,
common,
tags,
enumItem
},
getters
})
export default store
细品吧....................