一、基本概念

vuex为了解决不关联的组件整个网站状态数据共享问题专为Vue.js开发的状态管理模式。采用集中式存储管理应用的所有组件状态并以相应的规则保证状态以一种可预测的方式发生变化。

vuex有5个主要成员

state用来存储数据

mutations修改state中的数据

actions处理异步操作数据

getters类似计算属性对state中的数据做了一些处理

modules用来对复杂业务分模块每个模块也可以有state、mutations、actions、getters。

项目目录结构一般为

二、vuex中mutations和actions的区别

1流程顺序actions中调用mutations中的方法

相应视图-->修改state拆分为两部分视图触发actionaction再触发mutation。一般会在actions方法中进行commit('mutation中的回调方法', action异步获取到的数据)

2角色定位

基于流程顺序二者扮演不同的角色。mutation专注于修改state理论上是修改state的唯一途径。

action业务代码异步请求

3同步/异步限制

角色不同二者有不同的限制。mutation必须同步执行action可以异步但不能直接操作state而且可以通过action来提交mutations。

三、dispatch和commit的用法和区别

用法

dispach的是action的方法commit的是mutations的方法。

dispatch含有异步操作比如向后台提交数据。写法为this.$store.dispatch('action方法名', 值)

commit同步操作写法this.$store.commit('mutations方法名',值)

区别

1action提交的是mutation而不是直接变更状态可以包含任意的操作。

2dispatch推送一个action

dispatch异步操作this.$store.dispatch('action的方法', arg)调用actions里的方法。

commit同步操作this.$store.commit('mutations里的方法',arg)调用mutations里的方法。

在mutations中使用箭头函数更改state中的数据然后在actions中的函数中通过commit('SET_TOKEN', tokenSuccess)来调用mutations函数并传参才能再store存储成功。在需要的组件中使用this.$store.dispatch('actions')来调取store里的对应方法从而更新。

四、vuex如何做到持久化

vuex是保存在内存中的刷新之后就会丢失。通过vuex-presisit插件来做持久化。

五、vuex VS localStorage/sessionStorage

vuex都可对数据进行统一管理。存储数据更加安全但是当页面刷新后vuex中state存储的数据同时也会被更新vuex存储的数据不能持久化需要监听维持vuex存储的数据状态持久化。

localStorage/sessionStorage页面刷新不会丢失数据

解决页面刷新导致vuex数据也被更新可以参考https://juejin.cn/post/6918684399659646989