惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

MongoDB | Blog
MongoDB | Blog
宝玉的分享
宝玉的分享
博客园 - 三生石上(FineUI控件)
小众软件
小众软件
罗磊的独立博客
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
S
SegmentFault 最新的问题
Last Week in AI
Last Week in AI
人人都是产品经理
人人都是产品经理
博客园 - 聂微东
博客园 - 司徒正美
博客园 - 叶小钗
T
Tailwind CSS Blog
博客园 - Franky
V
V2EX
有赞技术团队
有赞技术团队
美团技术团队
雷峰网
雷峰网
爱范儿
爱范儿
Jina AI
Jina AI
D
DataBreaches.Net
H
Help Net Security
酷 壳 – CoolShell
酷 壳 – CoolShell

博客园 - 炎峰森林影

安装 OpenClaw(PowerShell) 安装卸载 WSL 基于Windows,Docker用法 [SSL]免费SSL证书,自动续期 [Python, PHP]存储单位转换 [MySQL]递归生成数据行 解决CSDN不登录就不能复制代码的问题 [JS]判断值为空 [BAT]批量提交到Git [网络搭建]Centos8 + Docker-CE + K8S(kubeadm) [Android]keytool创建密钥 [JS]JavaScript this 的六道坎 [MSSQL]跨数据库查询 [Tensorflow]统计功效解析 [Tensorflow]设置双击打开*.ipynb文件 [MSSQL]刷新全部视图 [Python]if-else的多种简洁的写法 [Python]Python __iter__ 深入理解 [Go]VSCode安装GoLang插件依赖安装失败
[Vue]对Vue,Vuex.store,mixins理解
炎峰森林影 · 2021-04-20 · via 博客园 - 炎峰森林影

== 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.混合对象内部方法名(参数...);