VueX 是一個專門為 Vue.js 應(yīng)用設(shè)計的狀態(tài)管理構(gòu)架，統(tǒng)一管理和維護(hù)各個vue組件的可變化狀態(tài)(你可以理解成 vue 組件里的某些 data )。
Vuex有五個核心概念：
state, getters, mutations, actions, modules。
1. state：
vuex的基本數(shù)據(jù)，用來存儲變量
2. geeter：
從基本數(shù)據(jù)(state)派生的數(shù)據(jù)，相當(dāng)于state的計算屬性
3. mutation：
提交更新數(shù)據(jù)的方法，必須是同步的(如果需要異步使用action)。每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。
回調(diào)函數(shù)就是我們實際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)，提交載荷作為第二個參數(shù)。
commit：同步操作，寫法：this.$store.commit('mutations方法名',值)
如：this.$store.commit('SET_PASSWORD',data.Password)
4. action：
和mutation的功能大致相同，不同之處在于 ==》1. Action 提交的是 mutation，而不是直接變更狀態(tài)。 2. Action 可以包含任意異步操作。
dispatch：異步操作，寫法：this.$store.dispatch('actions方法名',值)
如：this.$store.dispatch('login',res.data)文章來源地址http://www.zghlxwxcb.cn/news/detail-634672.html
5. modules：
模塊化vuex，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。
Vuex的用法：
文件夾步驟及引入與掛載
在vue項目的src文件下創(chuàng)建store文件夾（如果已經(jīng)安裝好了vuex的話），然后在store文件夾中創(chuàng)建index.js和getters.js文件與Modules文件夾
在項目的main.js中引入 和掛載
import store from './store'
let vue = new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
store文件下的index.js
//store文件下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import bankCard from './Modules/bankCard'
import user from './Modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
getters,
modules: {
bankCard,
user
}
})
store文件下的getters.js
//store文件下的getters.js
const getters = {
bankCards: state => state.bankCard.bankCards,
selectBankCards: state => state.bankCard.selectBankCards,
token: state => state.user.token
}
export default getters
在modules文件夾下創(chuàng)建一個user.js文件，user.js內(nèi)容：
import { setToken, removeToken } from '@/utils/auth'
import { getLogin } from '@/api/login'
const user = {
state: {
name: '',
roles: [],
permissions: [],
token: undefined,
// Password:'',
},
mutations: {
/*
commit：同步操作，寫法：this.$store.commit('mutations方法名',值)
如：this.$store.commit('SET_PASSWORD',data.Password)
*/
SET_TOKEN: (state, token) => {
state.token = token
},
SET_ROLES: (state, roles) => {
state.roles = roles
},
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
},
// SET_PASSWORD:(state,Password)=>{
// state.Password=Password
// }
},
actions: {
/*
dispatch：異步操作，寫法：this.$store.dispatch('actions方法名',值)
如：this.$store.dispatch('login',res.data)
*/
// 登錄
Login({ commit }, userInfo) {
return new Promise((resolve) => {
const { email, password } = userInfo
getLogin({ email, password }).then(res => {
const analysis = JSON.parse(atob(res.data.split('.')[1]))
setToken('token', res.data)
setToken('userId', analysis.userId)
setToken('email', email)
setToken('password', password)
commit('SET_TOKEN', res.data)
setToken('Admin-Token', res.data)
resolve()
})
})
},
// 獲取用戶信息
GetInfo({ commit }) {
return new Promise((resolve) => {
commit('SET_PERMISSIONS', [1])
commit('SET_ROLES', ['ROLE_DEFAULT'])
resolve()
// getInfo({token: sessionStorage.getItem('JWT')})
// .then(result => {
// const res = result.data;
// const userName = res.userName;
// if (res.permissionCodeList
// && res.permissionCodeList.length > 0)
// { // 驗證返回的roles是否是一個非空數(shù)組
// commit("SET_PERMISSIONS", res.permissionCodeList);
// } else {
// commit("SET_ROLES", ["ROLE_DEFAULT"]);
// }
// commit("SET_NAME", userName);
// resolve(res);
// }).catch(error => {
// reject(error);
// });
})
},
// 退出系統(tǒng)
// LogOut({ commit, state }) {
// return new Promise((resolve, reject) => {
// logout(state.token).then(() => {
// commit('SET_TOKEN', '')
// commit('SET_ROLES', [])
// commit('SET_PERMISSIONS', [])
// removeToken()
// resolve()
// }).catch(error => {
// reject(error)
// })
// })
// },
// 前端 登出
FedLogOut({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken('Admin-Token')
removeToken('token')
removeToken('password')
removeToken('email')
removeToken('userId')
resolve()
})
}
}
}
export default user
另：安裝js-cookie :
1、方式一：在你的工程項目中使用npm進(jìn)行安裝
npm install js-cookie --save2、方式二：直接使用cdn資源
<script
src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js">
</script>3、方式三：本地下載js-cookie的文件，然后進(jìn)行項目script標(biāo)簽引入：
<script src="/path/to/js.cookie.js"></script>src 文件夾下utils文件夾下auth.js內(nèi)容：
//直接拋出，使用的時候直接引入
//如：import { setToken, removeToken } from '@/utils/auth'
import Cookies from 'js-cookie'
// 60秒 * 60分鐘 * 24小時
function expires(seconds = 60 * 60 * 24) {
return new Date(new Date() * 1 + seconds * 1000)
}
export function getToken(TokenKey) {
return Cookies.get(TokenKey)
}
export function setToken(TokenKey, token, seconds) {
return Cookies.set(TokenKey, token, { expires: expires(seconds) })
}
export function removeToken(TokenKey) {
return Cookies.remove(TokenKey)
}
使用
//點擊登錄
getLogin(){
this.$store.dispatch('Login', {
email: this.data.Email, password: this.data.Password
}).then(() => {
this.$router.push({ path: this.redirect || '/Home' })
.catch(() => {
})
})
},
//點擊退出
logOut(){
this.$store.dispatch('FedLogOut')
this.$router.push({path:"/"})
},
使用下面這兩種方法存儲數(shù)據(jù)：
commit：同步操作，寫法：this.$store.commit('mutations方法名',值)
如：this.$store.commit('SET_PASSWORD',data.Password)文章來源：http://www.zghlxwxcb.cn/news/detail-634672.html
dispatch：異步操作，寫法：this.$store.dispatch('actions方法名',值)
如：this.$store.dispatch('login',res.data)
到了這里，關(guān)于vue中vuex的五個屬性和基本用法，另加js-cookie的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
