mpvue中配置vuex并持久化到本地Storage圖文教程解析
# 配置vuex和在vue中相同，只是mpvue有一個(gè)坑，就是不能直接在new Vue的時(shí)候傳入store。
步驟：
1.在src目錄下新建一個(gè)store目錄，結(jié)構(gòu)如下（官方推薦： vuex.vuejs.org/zh-cn/struc… ）
2. 在main.js中引入你的store, 并綁定到Vue構(gòu)造函數(shù)的原型上，這樣在每個(gè).vue的組件都可以通過(guò)this.$store訪問(wèn)store對(duì)象。
3. ok，可以使用了。我說(shuō)一下vuex官方推薦的使用方案（可適應(yīng)大型應(yīng)用）。
首先在mutation-types.js中定義你的Mutation的名字
為什么要先定義名稱常量？（下圖截取自vuex文檔）
然后在mutations.js中寫(xiě)處理方法
接著在index.js中定義變量：
ok,下面在組件中使用
ok了。
# 將vuex中的數(shù)據(jù)持久化到本地 （使用vuex-persistedstate）（ github.com/robinvdvleu… ）
安裝插件后在store中引入（配置如下）：
ok 了（vuex中的數(shù)據(jù)已經(jīng)實(shí)時(shí)的同步到本地）。
（ tips: 提示，小程序每次進(jìn)入都會(huì)執(zhí)行removeItem方法，導(dǎo)致數(shù)據(jù)存儲(chǔ)不下來(lái)，所以暫時(shí)把上圖的removeItem后面的函數(shù)寫(xiě)為一個(gè)空函數(shù)??！ ）
demo代碼 ： github.com/jianjian-we…
總結(jié)
以上所述是小編給大家介紹的mpvue中配置vuex并持久化到本地Storage圖文教程解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
解決element DateTimePicker+vue彈出框只顯示小時(shí)
這篇文章主要介紹了解決element DateTimePicker+vue彈出框只顯示小時(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue axios基于常見(jiàn)業(yè)務(wù)場(chǎng)景的二次封裝的實(shí)現(xiàn)
這篇文章主要介紹了vue axios基于常見(jiàn)業(yè)務(wù)場(chǎng)景的二次封裝的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)
開(kāi)發(fā)中經(jīng)常會(huì)遇到跨組件通信的場(chǎng)景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡(jiǎn)單的跨組件通信的一些方法,文中通過(guò)代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11
可以使用props將父組件的數(shù)據(jù)傳給子組件。子組件在接受數(shù)據(jù)時(shí)要顯示聲明props。下面通過(guò)一個(gè)例子給大家介紹Vue中父組件向子組件通信的方法，需要的朋友參考下吧2017-07-07
vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問(wèn)題解決方法
這篇文章主要介紹了vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問(wèn)題的解決方法,需要的朋友可以參考下2018-01-01
使用vue的transition完成滑動(dòng)過(guò)渡的示例代碼
這篇文章主要介紹了使用vue的transition完成滑動(dòng)過(guò)渡的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式
這篇文章主要介紹了vue簡(jiǎn)單的二維數(shù)組循環(huán)嵌套方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue+element-ui添加自定義右鍵菜單的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了Vue對(duì)象賦值視圖不更新問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作
這篇文章主要介紹了nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11