Vuex的小坑

1.表单

    Vuex的state不能使用v-model指令绑定到表单元素,会冲突的报错的。因为,一旦input的值改变了,v-model会试图改变input绑定的那个值,但是Vuex规定,只有mutations能改state,so会冲突。

    那么解决思路是什么呢?将state绑定到表单元素的value上,然后Input事件触发action,指派相应的mutations去改变state。

2.传参

    指派actions有两种方式

    原始的:this.$store.dispatch(actionsname,props)这种方法是可以传变量的。store.dispatch()返回的是promise,可以链式调用.then执行promise西乡resolve之后的代码。

传变量

    使用mapActions:这种方法不能传变量,因为组件内的变量都是用this.变量名调用的,但是在mapActions里面,访问不到当前组件data里面的值。所以要传变量就用原始的指派方法,传常量可以使用mapActions辅助函数。

辅助函数传参1

3.参数的位置

    mutations函数的第一参数是state,第二个参数才是actions传过来的参数。

    action的第一个参数的context,context是一个与store实例具有相同方法和属性的对象,所以在action里,可以调用context.commit来提交mutations,或者通过context.state和context.getters来获取state和getters。

    但是一定要注意,context不是store实例对象本身,因为store可能会分成很多个模块,context只是当前模块分割过来的部分store,对就是这个意思。

4.辅助函数

    关于辅助函数,可以直接在计算属性后面直接使用,也可以和组件的计算属性混合使用。混合使用的话要使用对象展开符。

对象展开符

辅助函数可以使用解构赋值从vuex引入

结构赋值引入辅助函数

5.关于store实例

要将action、getters、mutations、state都注入到store实例中,他们之间不需要互相导入,将完整的store实例export,再注入到项目根组件就好了。

6.关于http请求

    mutations必须是同步函数,所以所有的异步操作都要在actions里执行,mutations负责处理逻辑,修改stat。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 3,035评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,156评论 4 111
  • 这两天在做Vue移动端的项目,正好用到了Vuex,记录一下相关知识。 一、安装 npm yarn Vuex是Vue...
    婷楼沐熙阅读 7,787评论 2 2
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,536评论 0 7
  • State 单一状态树 Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“...
    peng凯阅读 738评论 2 0

友情链接更多精彩内容