mpvue封装vuex。vuex持久化储存解决刷新vuex数据清空

前言===
使用mpvue开发微信小程序基本上继承了vue的开发语言。vuex使用也是很方便的，进行简单的封装，以便开发时更方便的使用。同时进行了持久化处理，解决每次刷新页面，vuex 数据清空的问题。用户再次打开时可以保留上次的状态，减少请求。

• 全局安装vuex ；npm install vuex --save
• 在store文件下新建index.js

	import Vue from 'vue';
	import Vuex from 'vuex'
	const store = new Vuex.Store({
	  state: {
	    cityName: "北京市",
	    userName:"",
	    userToken:"",
	    adCode:"110101",
	    cityCode:"110101",
	    phone:"",
	    address:"",
	    headerImg:"",
	    wxOpenID:"",
	    isConnected:true,
	    allowAddress:false
	    
	  },
	  mutations: {
	    update(state, config) {
	      Object.keys(config).map((item, key) => {
	        state[item] = config[item]
	     })
	  }
 	 }

	export default store;

• 在main.js中引入，并挂载到全局

	import store from './store/index'
	Vue.prototype.$store = store;

• 更新store数据==直接update跟新store 不需要写过多的mutations

	computed: {
	...mapState(["cityName","allowAddress","adCode"]),
	},

	methods:{
		 ...mapMutations(["update"]),

		update(){
			this.update({ 
				cityName: res.data.result.ad_info.city,
				allowAddress:true,
				adCode:cityCode,
				cityCode:cityCode
			});
		}
	}

• vuex 持久化

  1.npm install vuex-persistedstate --save
  2.在store 中引入

	import createPersistedState from 'vuex-persistedstate'

3.实例化时添加

	 plugins: [
	    createPersistedState({
	      storage: {
	        getItem: key => wx.getStorageSync(key),
	        setItem: (key, value) => wx.setStorageSync(key, value),
	        removeItem: key => () => {}
	      }
	    })
	  ]