1. 什么是vuex?
vuex 是一个专门为vue.js应用程序开发的状态管理模式。
2. 为什么使用vuex?
当我们遇到多个组件共享状态时，多层组件的传值非常繁琐，不利于维护，因此我们把组件的共享状态抽取出来，统一管理，在这种模式下，不管在哪个组件都可以获取状态或触发行为。
3. vuex五种基本对象
- state：存储状态（变量）
- getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
- mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。提交mutions是更改Vuex中的状态的唯一方法。mutations必须是同步的，如果要异步需要使用actions。
- actions：异步操作。在组件中使用是$store.dispath(''),是专门操作异步请求的数据和业务逻辑的地方，它不能直接变更state中的状态，而是通过commit来调用mutations里的方法来改变state里的数据。
- modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
4. vuex的应用
//新建store.js文件
//初始化数据
state: {bannerlist:[]}
//请求数据
action:{
getbannerlist(context){
axios.get('/banner').then(res=>{
context.commit({
type:changebannerlist
data:res.data
})
})
}
// 改变状态
mutations: {
changeBannerlist (state, data) {
state.bannerlist = data.data
}
}
//在组件中使用
computed: {
...mapState({
bannerlist: (state) => state.home.bannerlist
})
}
created () {
this.$store.dispatch('getBannerlist')
}
5.组件中使用 vuex 的值和修改值的地方？
//直接获取 修改
//state
this.$ store.state.count
//getter
this.$ store.getters.count
//调用 action 修改 state 值，不带参数
this.$ store.dispatch('increment');
//调用 action 修改 state 值，带参数
this.$ store.dispatch('increment',{value :123});
6.pc端页面刷新时实现vuex缓存
办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据
办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）
分析：
办法一的缺点是不安全，不适用大数据量的存储；
办法二适用于少量的数据，并且不会出现网络延迟；
办法三是要讲的重点，办法二和办法一一起使用。