您的位置: 首页  >  文章  >  了解 vuex 配置中的state getters mutations 的作用

了解 vuex 配置中的state getters mutations 的作用

分类: 文章 • 2022-10-06 22:48:11

了解 vuex 配置中的state getters mutations 的作用

state

个人理解是存放公共数据状态 因为是定义在vuex上所以各个组件都能通过 $.store.state.数据名 的方式进行访问。 可以理解为vue实例对象中的 data
使用：vuex中配置state
了解 vuex 配置中的state getters mutations 的作用
组件中访问state
state值当然也具有响应式
了解 vuex 配置中的state getters mutations 的作用
了解 vuex 配置中的state getters mutations 的作用

getters

getters是对state对象的数据进行处理但是不会修改state中的数据 只是自身做出处理再输出
第一个参数是state 就是 state对象 （也可命名为其它但是指向依旧是state对象）（下面的参数也是如此） 把state传进来获取里面想要的数据
方法1 对state中的people数组过滤大于19岁的人输出他的名字
方法2 可进行传参，决定过滤大于多少身高的人输出其名字 不可以直接传参 需要返回一个匿名函数，在匿名函数中传参 原理大概就是返回出一个函数 再这个函数上进行传参是不会影响到方法的参数
这里是不建议在getters中传参的，要传参不如选择下面的方法mutation 因为这样传参就丧失了getters的意义了，它也不具备缓存功能了，后面效果图可以看到。
第二个参数是getters 就是本身了 如果要复用自身的方法则可以通过这样快捷的使用 第三个方法就是这样复用的
相当于data的计算属性computed
了解 vuex 配置中的state getters mutations 的作用
使用getters $.store.getters.方法名
了解 vuex 配置中的state getters mutations 的作用
结果
了解 vuex 配置中的state getters mutations 的作用
从这里可以看到三个组件一样按理说有缓存是只执行一次的但是进行了传参，导致不会进行缓存了
了解 vuex 配置中的state getters mutations 的作用

mutation

mutation 对state数据状态进行修改操作（可以改变state的数据状态）
第一个参数是state 同上
后面参数是可传递的 但是只能传一个，所以如果有多个参数想传可以通过数组或者对象的形式传递过来
参考方法3
方法1：传递想要增加的值
方法2：当前值减一
方法3：获取用户输入的数据放到数组中，传递过来再放到对象里再push到数组中（也可以直接传递对象过来）
了解 vuex 配置中的state getters mutations 的作用
效果

了解 vuex 配置中的state getters mutations 的作用
了解 vuex 配置中的state getters mutations 的作用
使用getters $.store.commit.(“方法名”，参数）
了解 vuex 配置中的state getters mutations 的作用

结果
了解 vuex 配置中的state getters mutations 的作用

了解 vuex 配置中的state getters mutations 的作用
其他页面值也是会改变的
了解 vuex 配置中的state getters mutations 的作用

end

还是的多用啊~ 多用多看源码多理解 ！
赞一个吧~
米娜.

相关推荐