vue使用--vuex快速学习与使用

　　什么是vuex？

　　Vuex核心概念

　　Vuex安装与使用

　　　　1.安装

　　　　2.目录结构与vuex引入

　　　　3.store中变量的定义、管理、派生（getter）

　　　　4.vuex辅助函数的使用说明

　　Vuex刷新数据丢失问题处理

穿梭>>>

 4.vuex辅助函数的使用说明：

  vuex的辅助函数有：mapState、mapMutations、mapGetters、mapActions

  它们的使用我们可以配合ES6的展开运算符将其与局部计算属性或方法混合使用。使用辅助函数后我们对state、mutation、getter、actiopn的使用可以改成以下这样：

    (State  =>  mapState)

    (mutation  =>  mapMutations)

    (action   =>    mapActions)

   (getter   =>    mapGetters)

 vuex的刷新页面丢失问题处理

  有些小伙伴可能发现了，vuex在页面刷新后，store中的状态将被重新初始化，赋值的数据丢失，针对这个问题怎么处理呢？ ---我们可以这样处理，在页面刷新或离开之前将store中的数据保存到sessionStorage 或 localStorage中，在页面重新加载后再将数据取出，通过vuex的$store.replaceState 将数据替换到store中，上代码

  app.vue:

 1 created () {
 2     var store = require('store');
 3 
 4     //在页面加载时读取sessionStorage里的状态信息
 5     if (sessionStorage.getItem("storedata") ) {
 6         this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("storedata"))))
 7     }
 8     //在页面刷新时将vuex里的信息保存到sessionStorage里
 9     window.addEventListener("beforeunload",()=>{
10         sessionStorage.setItem("storedata",JSON.stringify(this.$store.state))
11     });
12     // 兼容iphone手机
13     window.addEventListener("pagehide",()=>{
14         sessionStorage.setItem("storedata",JSON.stringify(this.$store.state))
15     });
16   },

  好了，写到这里吧~~，不足之处欢迎指出，好的建议感谢提出，谢过！