zoukankan      html  css  js  c++  java
  • Vuex

    我理解的

    五大模块 state mutations actions modules getter

    主要的核心是要理解数据的传递流程(单向数据流)

    组件有异步操作 就通过dispatch来触发action发起请求 然后再actions里派发 commit将数据给到mutations然后在mutations里操作数据 数据改变 页面自然改变

    没有异步操作就通过 commit 将数据给到mutations然后在mutations里操作数据 数据改变 页面自然改变

    state  就是数据放数据的

    类似

     

    mutations actions 都是对state数据的操作

    前者可以理解为同步state数据的处理

    后者是异步state数据的处理

    mutations 处理数据需要定义函数 定义的函数接收两个参数

    第一个是state数据(规定这样干) 第二个是传递的参数

     

    任何地方可以通过 this.$store.commit("plus"5); 实现mutations派发  此时一个对state数据的操作结束。

    actions是异步对数据的操作 其实就是在这里调接口获取数据,但是不对数据进行处理 ,因为在这里处理数据 vue  检测不到,页面绑定的数据不会进行改变。

    所以这里进行了两步操作

    先在actions定义一个方法 在这个方法里异步取到数据

    写法: 函数名(参数一可以理解为store本身也就是this对象)

    (第二个参数就是外面传递的数据没有的话就不用管它)

    下面的参数是解构赋值 可以理解为

     

    在方法里不直接处理state

    第二步通过commit将数据传给mutations

    mutations拿到数据在处理state,相当于又执行了一次 mutations对数据的操作。

    actions的触发就是通过 this.$store.dispatch("loadList"); 触发参数需要就传

    Moudels

    这个做模块化拆分会用到,一般较小的项目用不到。就相当于全局store的子属性又是一个store 可以对他进行任何的上述操作。

    Getters  

    定义一个函数参数是state

    返回一个对state中数据的处理类似计算属性(有return的)

    用法就直接在页面绑定就完事了

    mapState   mapGetters  mapMutations  mapActions

    mapState作用是把state中的数据映射到计算属性上

    mapMutations作用是把mutations中的数据映射到methdos中

    mapActions作用是把actions中的数据映射到methods

    mapGetters作用是把getters中的数据映射到计算属性上

    这几个就是简化上面的用到的一些操作

    mapState   mapGetters

    写在计算属性里 参数是数组 里面是 state的属性 或者 getters里定义的方法 使用的时候就直接在页面用就行

     

    mapMutations  mapActions

    需要函数调用触发 所以写在  methods里

     

    可以通过绑定事件来触发

    可以这样写  @click=plus(参数)”  这种写法可以向mutions传递数据  当然需要再传 不需要就不用传

    Actions也是一样

     以上内容纯属个人理解大家看看就好

  • 相关阅读:
    Eclipse IDE中Android项目打红叉的解决方法
    控件:PopupWindow 弹出窗口(基本操作)
    控件:AnalogClock与DigitalClock 时钟组件
    四大组件之一 BroadcastReceiver (拦截短信并屏蔽系统的Notification .)
    四大组件之一 文件存储_文本文件
    控件:Chronometer 计时器(定时震动)
    计算页面执行时间的两种方法
    URL解析的几种模式以及拟静态重定向问题
    SSH 文件上传错误:encountered 1 errors during the transfer终极解决方法:
    php过滤提交信息防注入
  • 原文地址:https://www.cnblogs.com/wxf-h/p/14993819.html
Copyright © 2011-2022 走看看