vue 實現(xiàn)通過vuex 存儲值 在不同界面使用
更新時間：2019年11月11日 15:57:46 作者：c230704
今天小編就為大家分享一篇vue 實現(xiàn)通過vuex 存儲值 在不同界面使用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
通過vuex 存儲
1. 創(chuàng)建store.js文件
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { //要設(shè)置的全局訪問的state對象
count: 1,
//要設(shè)置的初始屬性值
fid: '' //要在登錄頁面的記錄 的fid
};
const mutations = {
add(state, sum) { //同上，這里面的參數(shù)除了state之外還傳了需要增加的值sum
state.count += sum;
},
upfid(state, fid) {
state.fid = fid
}
};
const actions = {
add(context, num) { //同上注釋，num為要變化的形參
context.commit('add', num)
},
upfid(context, fid) {
context.fid = fid
}
};
const store = new Vuex.Store({
state,
actions,
mutations
});
export default store
2. 保存fid這個值
this.$store.dispatch('upfid',this.fid)//保存fid
3, 在其他頁面獲取fid 這個值
<p>頁面上獲得{{city}}</p>
data () {
return {
fid:this.city//js中得到fid
}
},
computed:{//必須
city(){
return this.$store.state.fid
}
},
以上這篇vue 實現(xiàn)通過vuex 存儲值 在不同界面使用就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
本文詳細介紹了如何在計算機上安裝和配置Node.js,包括下載Node.js,驗證安裝成功,配置npm的全局模塊目錄和緩存目錄,設(shè)置環(huán)境變量,配置npm鏡像,安裝Vue.js等步驟,通過這些指導(dǎo),你可以在IDEA上成功創(chuàng)建和運行Vue項目2024-10-10
這篇文章主要為大家詳細介紹了vue router路由嵌套不顯示的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問題2017-06-06
vue-router 按需加載 component: () => import() 報錯的解決
這篇文章主要介紹了vue-router 按需加載 component: () => import() 報錯的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文將探討動態(tài)組件加載失敗的常見原因,并提供排查與解決方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
今天小編就為大家分享一篇vue中當圖片地址無效的時候,顯示默認圖片的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
最近入職了新公司,接手了一個新拆分出來的Vue項目,針對該項目做了個打包優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于Vue項目中打包優(yōu)化的四種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
Vue-Access-Control 前端用戶權(quán)限控制解決方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 實現(xiàn)的前端用戶權(quán)限控制解決方案。這篇文章主要介紹了Vue-Access-Control：前端用戶權(quán)限控制解決方案,需要的朋友可以參考下2017-12-12
Vue3 reactive響應(yīng)式賦值頁面不渲染的解決
這篇文章主要介紹了Vue3 reactive響應(yīng)式賦值頁面不渲染的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
在Vue3.5版本中最大的改動就是響應(yīng)式重構(gòu),重構(gòu)后性能竟然炸裂的提升了56%,本文我們來講講使用雙向鏈表后,Vue內(nèi)部是如何實現(xiàn)依賴收集和依賴觸發(fā)的,感興趣的可以了解下2024-11-11
本文給大家詳細講述了Vue2.0中集成UEditor富文本編輯器的方法以及相關(guān)注意事項做了講述，有興趣的朋友學(xué)習(xí)下。2018-03-03