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)文章
vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實現(xiàn)
本文主要介紹了Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
解決element-ui庫的el-row的gutter=10間距失效問題
這篇文章主要介紹了解決element-ui庫的el-row的gutter=10間距失效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Element中table組件按照屬性執(zhí)行合并操作詳解
在我們?nèi)粘ｉ_發(fā)中，表格業(yè)務(wù)基本是必不可少的，對于老手來說確實簡單，家常便飯罷了，但是對于新手小白如何最快上手搞定需求呢？本文從思路開始著手，幫你快速搞定表格2022-11-11
element validate驗證函數(shù)不執(zhí)行的原因分析
這篇文章主要介紹了element validate驗證函數(shù)不執(zhí)行的原因分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue?插件及瀏覽器本地存儲，插件通常用來為Vue添加全局功能，包含install方法的一個對象。更多相關(guān)介紹，需要的小伙伴可以參考下面文章內(nèi)容2022-05-05
本文主要介紹了vue項目運行時出現(xiàn)It works的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue+element多選級聯(lián)選擇器自定義props使用詳解
這篇文章主要給大家介紹了關(guān)于vue+element多選級聯(lián)選擇器自定義props使用的相關(guān)資料,級聯(lián)選擇器展示的結(jié)果都是以數(shù)組的形式展示,也就是v-model綁定的結(jié)果,需要的朋友可以參考下2023-07-07
vue+elementui通用彈窗的實現(xiàn)(新增+編輯)
這篇文章主要介紹了vue+elementui通用彈窗的實現(xiàn)(新增+編輯)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue3?企業(yè)級組件庫框架搭建?pnpm?monorepo實戰(zhàn)示例
這篇文章主要為大家介紹了Vue3?企業(yè)級組件庫框架搭建?pnpm?monorepo實戰(zhàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11