在Vue中實現(xiàn)添加全局store
Vue添加全局store
在命令行中輸入安裝
npm install --save vuex
在main.js文件中引用
store和在new Vue中聲明store
import store from './store' store,
在src中創(chuàng)建一個page文件
在page文件下創(chuàng)建一個module的js文件(內(nèi)容如下)
const state = { HomeStatus:{ LoginStatus:false }, Users:[], } const mutations = { ['setuseinfo'] (state, data) { }, } const actions = { }
在src下創(chuàng)建一個store文件
在store文件下創(chuàng)建一個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 包含有五個基本的對象
state
:存儲狀態(tài)。也就是變量;getters
:派生狀態(tài)。也就是set、get中的get,有兩個可選參數(shù):state、getters分別可以獲取state中的變量和其他的getters。外部調(diào)用方式:store.getters.personInfo()。就和vue的computed差不多;mutations
:提交狀態(tài)修改。也就是set、get中的set,這是vuex中唯一修改state的方式,但不支持異步操作。第一個參數(shù)默認(rèn)是state。外部調(diào)用方式:store.commit(‘SET_AGE’, 18)。和vue中的methods類似。actions
:和mutations類似。不過actions支持異步操作。第一個參數(shù)默認(rèn)是和store具有相同參數(shù)屬性的對象。外部調(diào)用方式:store.dispatch(‘nameAsyn’)。this.$store.dispatch(‘user/login’, this.loginForm)modules
:store的子模塊,內(nèi)容就相當(dāng)于是store的一個實例。調(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,幫助手冊https://www.jianshu.com/p/2e5973fe1223 //模塊化可參考http://www.dbjr.com.cn/article/150752.htm Vue.use(Vuex); //創(chuàng)建VueX對象,單頁面使用<h1>{{ $store.state.name }}</h1>console.log(this.$store.state.name) //新增state對象Vue.set(state,"age",15),刪除Vue.delete(state,'age') const store = new Vuex.Store({ //存放數(shù)據(jù),存放狀態(tài) //使用方法 state, //加工state成員給外界 //state 當(dāng)前VueX對象中的狀態(tài)對象 // getters 當(dāng)前getters對象,用于將getters下的其他getter拿來用 //組件使用this.$store.getters.fullInfo getters, //state成員操作,操作state數(shù)據(jù)的方法的集合,比如對該數(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方法,比如對該數(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對象(可對對象進(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時通常會分功能創(chuàng)建多的module,單個module里的操作大家應(yīng)該很清楚,那多個module之間怎么調(diào)用了?
詳細(xì)代碼:
現(xiàn)在我有兩個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里各個方法的第一個參數(shù)其實有很多屬性,只是我們平時習(xí)慣了解構(gòu)的寫法,如setMenuData({commit, state},data)。當(dāng)把第一個參數(shù)的值全輸出,如setMenuData(param,data),輸出param會發(fā)現(xiàn)其中包含以下屬性:
vue文件調(diào)用store的action方法
const actions = { // 根據(jù)權(quán)限動態(tài)生成路由 async generateRoutes({ commit }) { // 執(zhí)行代碼 } }
created() { this.generateRoutes() }, methods: { ...mapActions('menu', [ 'generateRoutes' ]) }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue填坑之webpack run build 靜態(tài)資源找不到的解決方法
今天小編就為大家分享一篇vue填坑之webpack run build 靜態(tài)資源找不到的解決方法。具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue之el-upload使用FormData多文件同時上傳問題
這篇文章主要介紹了vue之el-upload使用FormData多文件同時上傳問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05Vue進(jìn)階之CodeMirror的應(yīng)用小結(jié)
CodeMirror支持在線編輯代碼,風(fēng)格包括js, java, php, c++等等100多種語言,下面這篇文章主要來和大家講講CodeMirror的應(yīng)用,感興趣的可以了解一下2023-06-06vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程
這篇文章主要介紹了vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04VUE Error: getaddrinfo ENOTFOUND localhost
這篇文章主要介紹了VUE Error: getaddrinfo ENOTFOUND localhost,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應(yīng)式的原理,回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應(yīng)式是否相同,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-08-08vue實現(xiàn)導(dǎo)出word文檔功能實例(含多張圖片)
項目需要導(dǎo)出word,于是乎又是查閱資料,然后自己寫,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)導(dǎo)出word文檔功能(含多張圖片)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09