在Vue中實(shí)現(xiàn)添加全局store
Vue添加全局store
在命令行中輸入安裝
npm install --save vuex

在main.js文件中引用
store和在new Vue中聲明store
import store from './store' store,

在src中創(chuàng)建一個(gè)page文件
在page文件下創(chuàng)建一個(gè)module的js文件(內(nèi)容如下)
const state = {
HomeStatus:{
LoginStatus:false
},
Users:[],
}
const mutations = {
['setuseinfo'] (state, data) {
},
}
const actions = {
}
在src下創(chuàng)建一個(gè)store文件
在store文件下創(chuàng)建一個(gè)index的js文件
import Vue from 'vue'
import Vuex from 'vuex'
import page from '../page/module'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
modules:{
page
}
})
store使用方法講解
vuex 包含有五個(gè)基本的對(duì)象
state:存儲(chǔ)狀態(tài)。也就是變量;getters:派生狀態(tài)。也就是set、get中的get,有兩個(gè)可選參數(shù):state、getters分別可以獲取state中的變量和其他的getters。外部調(diào)用方式:store.getters.personInfo()。就和vue的computed差不多;mutations:提交狀態(tài)修改。也就是set、get中的set,這是vuex中唯一修改state的方式,但不支持異步操作。第一個(gè)參數(shù)默認(rèn)是state。外部調(diào)用方式:store.commit(‘SET_AGE’, 18)。和vue中的methods類似。actions:和mutations類似。不過actions支持異步操作。第一個(gè)參數(shù)默認(rèn)是和store具有相同參數(shù)屬性的對(duì)象。外部調(diào)用方式:store.dispatch(‘nameAsyn’)。this.$store.dispatch(‘user/login’, this.loginForm)modules:store的子模塊,內(nèi)容就相當(dāng)于是store的一個(gè)實(shí)例。調(diào)用方式和前面介紹的相似,只是要加上當(dāng)前子模塊名,如:store.a.getters.xxx()。

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import getters from './getters'
import mutations from './mutations.js'
import actions from './actions.js'
//安裝Vue Devtools調(diào)試工具h(yuǎn)ttps://blog.csdn.net/li22356/article/details/113092495
//掛載Vuex,幫助手冊(cè)https://www.jianshu.com/p/2e5973fe1223
//模塊化可參考http://www.fzitv.net/article/150752.htm
Vue.use(Vuex);
//創(chuàng)建VueX對(duì)象,單頁面使用<h1>{{ $store.state.name }}</h1>console.log(this.$store.state.name)
//新增state對(duì)象Vue.set(state,"age",15),刪除Vue.delete(state,'age')
const store = new Vuex.Store({
//存放數(shù)據(jù),存放狀態(tài)
//使用方法
state,
//加工state成員給外界
//state 當(dāng)前VueX對(duì)象中的狀態(tài)對(duì)象
// getters 當(dāng)前getters對(duì)象,用于將getters下的其他getter拿來用
//組件使用this.$store.getters.fullInfo
getters,
//state成員操作,操作state數(shù)據(jù)的方法的集合,比如對(duì)該數(shù)據(jù)的修改、增加、刪除等等。
//組件調(diào)用this.$store.commit('SET_TOKEN','new token')掛載方法
//同步處理
mutations,
//異步處理
//組件中使用this.$store.dispatch('aEdit','new TOKEN')
actions
});
export default () => {
return store
}
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//這里放全局參數(shù),比如用戶登錄信息
state: {
token: "helloVueX",
name: "",
age: ""
},
mutations: {
//這里是set方法,比如對(duì)該數(shù)據(jù)的修改、增加、刪除等等。
//組件調(diào)用this.$store.commit('SET_TOKEN','new token')掛載方法
SET_TOKEN: (state, token) => {
state.token = token
console.log(state.token);
}
},
//getters 當(dāng)前getters對(duì)象(可對(duì)對(duì)象進(jìn)行二次更改),用于將getters下的其他getter拿來用,組件通過this.$store.getters.fullInfo拿來使用
getters: {
token: state => state.token,
nameInfo(state) {
return "姓名:" + state.name
},
fullInfo(state, getters) {
return getters.nameInfo + '年齡:' + state.age
}
},
//異步處理
//組件中使用this.$store.dispatch('aEdit','new TOKEN')
actions: {
QQlogin({commit}, token) {
return new Promise((resolve, reject) => {
setToken(token); //把token存放到cookie里
commit('SET_TOKEN', token) //commit調(diào)用mutations 數(shù)據(jù)
resolve()
})
},
aEdit(context, payload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit('SET_TOKEN', payload)
resolve()
}, 2000)
})
}
},
modules: {
//這里是我自己理解的是為了給全局變量分組,所以需要寫提前聲明其他store文件,然后引入這里
}
})
vuex,module間的方法調(diào)用
我們用vuex時(shí)通常會(huì)分功能創(chuàng)建多的module,單個(gè)module里的操作大家應(yīng)該很清楚,那多個(gè)module之間怎么調(diào)用了?
詳細(xì)代碼:
現(xiàn)在我有兩個(gè)module:user 和 menu,要在user中調(diào)用menu的actions方法,操作如下:
const user = {
state: {
permissions: []
},
mutations: {
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
}
},
actions: {
getPermissions({commit}) {
queryPermissions().then(res => {
sessionStorage.setItem('permissions', JSON.stringify(res))
this.dispatch('setPermissions', res); // 調(diào)本module里的方法
})
},
setPermissions({commit, dispatch, state, rootState}, data) {
commit('SET_PERMISSIONS', data); // 本module的commit
dispatch('setMenuData', data); // 調(diào)menu里的方法
console.log(rootState.menu.menus); // 取menu里的參數(shù)
}
}
}
export default user
const menu = {
state: {
menus: []
},
mutations: {
SET_MENUS: (state, data) => {
state.menus = data
}
},
actions: {
setMenuData({commit, state}, data) {
commit('SET_MENUS', data);
}
}
}
export default menu
解釋:
actions里各個(gè)方法的第一個(gè)參數(shù)其實(shí)有很多屬性,只是我們平時(shí)習(xí)慣了解構(gòu)的寫法,如setMenuData({commit, state},data)。當(dāng)把第一個(gè)參數(shù)的值全輸出,如setMenuData(param,data),輸出param會(huì)發(fā)現(xiàn)其中包含以下屬性:
vue文件調(diào)用store的action方法
const actions = {
// 根據(jù)權(quán)限動(dòng)態(tài)生成路由
async generateRoutes({ commit }) {
// 執(zhí)行代碼
}
}
created() {
this.generateRoutes()
},
methods: {
...mapActions('menu', [
'generateRoutes'
])
}
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子
今天小編就為大家分享一篇vue設(shè)置動(dòng)態(tài)請(qǐng)求地址的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue實(shí)現(xiàn)彈窗引用另一個(gè)頁面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁面窗口,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
基于vue-cli3和element實(shí)現(xiàn)登陸頁面
這篇文章主要介紹了vue-cli3和element做一個(gè)簡單的登陸頁面本文實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
Vue監(jiān)聽器簡單使用及注意事項(xiàng)說明
這篇文章主要介紹了Vue監(jiān)聽器簡單使用及注意事項(xiàng)說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
利用Vite搭建Vue3+ElementUI-Plus項(xiàng)目的全過程
vue3如今已經(jīng)成為默認(rèn)版本了,相信大多數(shù)公司已經(jīng)全面擁抱vue3了,下面這篇文章主要給大家介紹了關(guān)于利用Vite搭建Vue3+ElementUI-Plus項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
VUE使用axios調(diào)用后臺(tái)API接口的方法
這篇文章主要介紹了VUE使用axios調(diào)用后臺(tái)API接口的方法,文中講解非常細(xì)致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-08-08
vue項(xiàng)目開啟gzip壓縮功能簡單實(shí)例
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目開啟gzip壓縮功能的相關(guān)資料,gizp壓縮是一種http請(qǐng)求優(yōu)化方式,通過減少文件體積來提高加載速度,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue使用element-plus依賴實(shí)現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue使用element-plus依賴實(shí)現(xiàn)表格增加,文中示例代碼講解的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-12-12

