快捷導(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)文章

在idea上Vue的安裝和創(chuàng)建過程
本文詳細(xì)介紹了如何在計(jì)算機(jī)上安裝和配置Node.js,包括下載Node.js,驗(yàn)證安裝成功,配置npm的全局模塊目錄和緩存目錄,設(shè)置環(huán)境變量,配置npm鏡像,安裝Vue.js等步驟,通過這些指導(dǎo),你可以在IDEA上成功創(chuàng)建和運(yùn)行Vue項(xiàng)目
2024-10-10
vue router路由嵌套不顯示問題的解決方法
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問題
2017-06-06
vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-router 按需加載 component: () => import() 報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue動(dòng)態(tài)組件加載失敗:原因、排查與解決過程
本文將探討動(dòng)態(tài)組件加載失敗的常見原因,并提供排查與解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2025-03-03
vue中當(dāng)圖片地址無效的時(shí)候,顯示默認(rèn)圖片的方法
今天小編就為大家分享一篇vue中當(dāng)圖片地址無效的時(shí)候,顯示默認(rèn)圖片的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue項(xiàng)目中打包優(yōu)化的四種方法詳解
最近入職了新公司,接手了一個(gè)新拆分出來的Vue項(xiàng)目,針對(duì)該項(xiàng)目做了個(gè)打包優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中打包優(yōu)化的四種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue-Access-Control 前端用戶權(quán)限控制解決方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 實(shí)現(xiàn)的前端用戶權(quán)限控制解決方案。這篇文章主要介紹了Vue-Access-Control：前端用戶權(quán)限控制解決方案,需要的朋友可以參考下
2017-12-12
Vue3 reactive響應(yīng)式賦值頁(yè)面不渲染的解決
這篇文章主要介紹了Vue3 reactive響應(yīng)式賦值頁(yè)面不渲染的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
一文帶你搞懂Vue3.5的響應(yīng)式重構(gòu)
在Vue3.5版本中最大的改動(dòng)就是響應(yīng)式重構(gòu),重構(gòu)后性能竟然炸裂的提升了56%,本文我們來講講使用雙向鏈表后,Vue內(nèi)部是如何實(shí)現(xiàn)依賴收集和依賴觸發(fā)的,感興趣的可以了解下
2024-11-11
Vue2.0中集成UEditor富文本編輯器的方法
本文給大家詳細(xì)講述了Vue2.0中集成UEditor富文本編輯器的方法以及相關(guān)注意事項(xiàng)做了講述，有興趣的朋友學(xué)習(xí)下。
2018-03-03