快捷導(dǎo)航

vue 實(shí)現(xiàn)通過vuex 存儲(chǔ)值在不同界面使用

更新時(shí)間：2019年11月11日 15:57:46 作者：c230704

今天小編就為大家分享一篇vue 實(shí)現(xiàn)通過vuex 存儲(chǔ)值在不同界面使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

通過vuex 存儲(chǔ)

1. 創(chuàng)建store.js文件

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);


const state = { //要設(shè)置的全局訪問的state對(duì)象
  count: 1,
  //要設(shè)置的初始屬性值
  fid: '' //要在登錄頁(yè)面的記錄 的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這個(gè)值

this.$store.dispatch('upfid',this.fid)//保存fid

3, 在其他頁(yè)面獲取fid 這個(gè)值

<p>頁(yè)面上獲得{{city}}</p> 


 data () {
  return {
   fid:this.city//js中得到fid
  }
 },
 computed:{//必須
  city(){
   return this.$store.state.fid
  }
 },

以上這篇vue 實(shí)現(xiàn)通過vuex 存儲(chǔ)值在不同界面使用就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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