Vue.js 中的 Vuex 操作与最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoyuqwer/article/details/115109051

1. mutation
在这里插入图片描述

some用来判断是否有满足条件的元素，有的话，返回true，没有返回false，find用来找元素，找到的话，返回第一个符合条件的元素

一个用来判断是否有，一个用来找

mutation为什么不能直接更改item呢，因为mutation要通过state来修改state中的数据，不能直接改state中的数据

在这里插入图片描述

在mutation中写异步操作，页面上的数据可以更新，但是调试工具无法检测到数据变化，所以mutation只能写同步操作

2. getters总计
在这里插入图片描述

当页面的选择框和store中的数据要联动，比如，如果页面点击了全选，则页面中所有的数据都要全选，页面中的数据全选的时候，全选按钮被选择，这时在页面的computed属性中要get和set
get属性用来获取数据
set属性用来触发mutation方法，操作state中的数据
在这里插入图片描述

uptChecked方法操作state.carList数据的每项是否选中

一般都是在页面的computed计算属性中获取store中的数据，如果需要组件和store中的数据联动，比如全选选择框，那么则要在computed方法中通过get属性获取数据，set属性对store中的数据操作

3. action
如果在mutations中书写异步操作的话，调试工具将不能检测到数据的变化
所以要将异步操作写在actions中，实际上异步操作很少，一个是定时器，一个是ajax请求，所以实际项目中基本不会在actions中写异步方法，但是还是要了解这个方法

action和mutation最大的区别是，action所写的异步操作的数据变化可以被调试工具检测到，mutation所写的异步操作的数据变化不能被调试工具检测到

action中的方法的第一个参数context，上下文，打印出来的是这样的，所以可以用context.commit来调用mutation
在这里插入图片描述
action里面既可以同步操作也可以异步操作，通过action调用异步之后，页面和dev调试工具中的数据一致

直接在action方法中修改state中的数据，页面上的数据会改变，但是调试工具检测不到数据改变，所以不能直接通过action修改state中的数据，一定要通过mutation修改state中的数据
在这里插入图片描述

4. mapState，mapMutation辅助函数
在这里插入图片描述

mapState为了方便在computed计算属性中一次性获取到很多state中的数据
mapState有三种写法，一种是数组写法，state中的数据名称和组件中的数据名称保持一致
另一种写法是对象写法，可以给数据在组件中取个新的名字
还有一种函数写法，这种写法的好处是可以对当前组件中的data进行组合操作
最后，箭头函数，因为箭头函数中的this不能指向当前vue实例，所以不能用箭头函数获取数据
在这里插入图片描述