Faster, Higher, Stronger

Vuex Data Persistence数据持久化

In one of my frontend project using VueJS, there is a need to maintain run-time data in javascript to local hardware so that these data will not be lost in case of a page refreshing. This requirement can be saying in another way – data persistence is required. Since the diversity of frontend environment, there are many stuff can be employed to save your run-time data. For example, if you use react-native, you can use one of React Native’s API called AsyncStorage; if you are written html webpage, the Html api sessionStorage, localStorage and cookie can all be employed. And today we are going to employ localStorage, we’re going to talk about data persistence in webpage developed using VueJS.

First, let’s talk about the premise: my project used vue 2.2.1, vuex 2.2.1, and vuex-persist 0.1.8. To use vuex-persist 0.1.8, the official npm page says that Vue of version equal to or higher than 2.0 ,  vuex of version equal to or higher than 2.1 are required.

Vuex-persist is used as a plugin of vuex. In my program, I create the store using code like below (simplified and many code is removed):


Please be aware of that some of the code above is not written in the best or at least better practice, for example, state.options is just static data, and these data can be separated to a new file and not included in the state variable, because it’s not necessary to monitoring these data through vuex. They are listed here just for intention purpose.)


First, let’s analyze that which data in variable state should be keep persist – that’s to say – which data should be saved to local hardware through Html5 api  localStorage.

You can see there are eight children under variable state: ‘config’, ‘mock’, ‘states’, ‘wechat’, ‘user’, ‘car’, ‘order’, and ‘options’. Now I tell you that children like ‘config’, ‘mock’ and ‘options’ are all static data that won’t be changed through entire run-time. So it’s obviously that only children ‘states’, ‘wechat’, ‘user’, ‘car’, ‘order’. Absolutely, it’s not. The children ‘states’ is used to store data for common layout components like alert dialog popup, and you can see that there is method properties stored in children ‘state’, so it’s not appropriate to save it in localStorage. So finally, we only need to keep data in ‘wechat’, ‘user’, ‘car’ and ‘order’ persistent. So now you know why the configuration object passed to new VuexPersistence is as below:

I won’t cover configuration detail for vuex-persist, because you can simply open the official link here: and read it online.


Actually, vuex-persist is just a nom package used to generate a vuex plugin which can save and restore data to and from api like localStorage. You can revise plugin alike yourself, if you read the source code of vuex-persist, you will know it’s just not a hard work. If you doesn’t know how to write a plugin for vuex, you can read this webpage:

————-stylish cutting line————–

Written by Yakima Teng,

August 27, 2017

in Shanghai, China

赞(1) 打赏(金额可任意指定)
未经允许不得转载:峰间的云 » Vuex Data Persistence数据持久化

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1


    xhy3年前 (2017-10-20)回复