zoukankan      html  css  js  c++  java
  • [Vue]对Vue,Vuex.store,mixins理解

    == vue ==

    this.$dispatch、this.$broadcast弃用,改用this.$emit、this.$on

    this.$emit:子组件调用父组件传给子组件的方法
    this.$on/this.$once:创建一个事件监听,可用this.$emit触发
    this.$off:删除一个事件监听

    this.$set:新增/修改嵌套对象属性,可触发视图更新

    == vuex.store ==
    PS:当作全局变量
    PS:里面的方法都是对state的变量进行修改

    state:存放变量数据
    -> this.$store.state.变量名
    getters:返回计算结果,相当于C#的GET/SET方法中的GET
    -> this.$store.getters.变量名
    mutations:同步方法,相当于C#的GET/SET方法中的SET
    -> this.$store.commit('方法名', 参数...);
    actions:对mutations方法进行异步操作,建议后缀加上Asyn
    -> this.$store.dispatch('方法名', 参数...);


    mapState/mapGetters/mapMutations/mapActions:映射state/getters/mutations/actions到this
    -> import { mapState, mapGetters,mapMutations, mapActions } from 'vuex';
    -> computed: {
    -> ...mapState(['变量名'...]), // 不用在data声明,即可在本页内<template><script>使用
    -> ...mapGetters(['变量名'...]), // 同上
    -> },
    -> methods: {
    -> ...mapMutations(['方法名'...]), // 可在本页内调用,this.方法名(参数...);
    -> ...mapActions(['方法名'...]), // 同上
    -> },

    == mixins ==
    PS:内部方法可以被页面方法重写,参考:https://www.jianshu.com/p/bcff647d24ec
    PS:官方建议添加前缀$_,防止污染

    -> import 混合对象 from '混合对象路径';
    -> mixins: [混合对象...], // 此处会调用内部生命周期
    // 映射到this,可在本页内调用,this.混合对象内部方法名(参数...);

    个性签名:做要做好,做到不三不四不如不做。
  • 相关阅读:
    纹理mag filter不能取GL_XXX_MIPMAP_XXXX
    (转)No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=arm64, VA 解决办法
    轻松制作儿童趣味算术软件
    批处理设置IP地址
    安卓手机文件管理器简单横向评比
    Linux基础和网络管理上机试题
    值得收藏的批处理程序
    王垠:完全用Linux工作
    XINU安装程序.exe一键配置好XINU实验环境
    很全面的WinRAR实用技巧系列
  • 原文地址:https://www.cnblogs.com/hcbin/p/14680476.html
Copyright © 2011-2022 走看看