State、Getter、Mutation 、Action、Module 五种
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
vuex的State特性是?
stae就是存放数据的地方,类似一个仓库 , 特性就是当mutation修改了state的数据的时候,他会动态的去修改所有的调用这个变量的所有组件里面的值( 若是store中的数据发生改变,依赖这个数据的组件也会发生更新 )
vuex的Getter特性是?
getter用来获取数据,mapgetter经常在计算属性中被使用
vuex的Mutation特性是?
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作
为什么不能直接在mutation进行异步操作
通过commit 提交 mutation 的方式来修改 state 时,vue的调试工具能够记录每一次state的变化,这样方便调试。但是如果是直接修改state,则没有这个记录。比如在mutation中用setTimeout改变state的值 state是不会变的
vuex参数消失解决办法
页面刷新store.state中的数据消失是不可避免的,那么使用localStorage来避免这个问题。发现问题的时候我就考虑到存数据在localStorage里,可以使用全局的方法将store的数据存储在localStorage里。
在App.vue中,created初始化生命周期中写入以下方法:
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
})
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))))
replaceState这个方法是替换 store 的根状态,然后通过对象赋值assign将localStorage进行赋值
beforeunload这个方法是在页面刷新时触发的,将store中的信息存入localStorage
这样就通过localStorage就可以来避免vuex刷新数据消失的问题了。