mpvue中配置vuex並持久化到本機Storage圖文教學解析

這篇文章主要介紹了mpvue中配置vuex並持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同，只是mpvue有一個坑，就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細，需要的朋友參考下吧

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

步驟：

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

 

2. 在main.js中引入你的store, 並綁定到Vue建構函數的原型上，這樣在每個.vue的元件都可以透過this.$store存取store物件。

 

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

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

# 

##為什麼要先定義名稱常數？ （下圖截取自vuex文件）

 

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

 ##接著在index .js中定義變數：

 

ok,下面在元件中使用

## 

ok了。

# 將vuex中的資料持久化到本機（使用vuex-persistedstate）（ github.com/robinvdvleu… ）

安裝外掛程式後在store中引入（配置如下）：

 

ok 了（vuex中的資料已經即時的同步到本地）。

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

 

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

vue裡函數的呼叫順序介紹

#基於vue2.0動態元件及render詳解

Vue實作動態建立和刪除資料的方法

以上是mpvue中配置vuex並持久化到本機Storage圖文教學解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！