mpvue中配置vuex並持久化到本地Storage

守護四葉草發表於2019-03-03

demo程式碼github.com/jianjian-we…

# 配置vuex和在vue中相同,只是mpvue有一個坑,就是不能直接在new Vue的時候傳入store。

步驟:

1.在src目錄下新建一個store目錄,結構如下(官方推薦:vuex.vuejs.org/zh-cn/struc…

mpvue中配置vuex並持久化到本地Storage

2. 在main.js中引入你的store, 並繫結到Vue建構函式的原型上,這樣在每個.vue的元件都可以通過this.$store訪問store物件。

mpvue中配置vuex並持久化到本地Storage

3. ok,可以使用了。我說一下vuex官方推薦的使用方案(可適應大型應用)。

 首先在mutation-types.js中定義你的Mutation的名字

mpvue中配置vuex並持久化到本地Storage

為什麼要先定義名稱常量?(下圖擷取自vuex文件)

mpvue中配置vuex並持久化到本地Storage

然後在mutations.js中寫處理方法

mpvue中配置vuex並持久化到本地Storage

接著在index.js中定義變數:

mpvue中配置vuex並持久化到本地Storage

ok,下面在元件中使用

mpvue中配置vuex並持久化到本地Storage

ok了。

# 將vuex中的資料持久化到本地 (使用vuex-persistedstate)(github.com/robinvdvleu…


安裝外掛後在store中引入(配置如下):

mpvue中配置vuex並持久化到本地Storage

ok 了(vuex中的資料已經實時的同步到本地)。

tips: 提示,小程式每次進入都會執行removeItem方法,導致資料儲存不下來,所以暫時把上圖的removeItem後面的函式寫為一個空函式!!

mpvue中配置vuex並持久化到本地Storage

demo程式碼: github.com/jianjian-we…

相關文章