专栏首页前端说吧vuex - 常用命令学习及用法整理

vuex - 常用命令学习及用法整理

https://vuex.vuejs.org/zh-cn/api.html

命令

用途

备注

this.$store

组件中访问store实例

store.state.a

获取在state对象中的数据

store文件中

$store.state.a

视图上(即标签上)

this.$store.state.a

1) 组件内部,data数据里边 2) 组件计算属性返回值 computed: {     count () { return this.$store.state.count }  }

store.getters

派生state的一些状态(即拿到,再进行一些小变化后返回新的状态,比如给state中某个数组内部小于10的前边加上0再返回)

Getter对象

this.$store.getters.oneFunction

访问Getter对象内的某个属性的值

在组件的计算属性中使用

store.commit()

【方法】提交 mutation,触发状态变更(修改state的值)

action文件中

this.$store.commit(state,payload)

在组件的 methods 中

store.dispatch()

【方法】触发 action,以间接地触发mutation,进而使状态变更(修改state的值)

action文件中

this.$store.dispatch('incrementBy',amount)

在组件的 methods 中 'incrementBy':  mutationFunctionName amount =  payload

2018-04-07  18:00:52

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 抓住九月的尾巴分享一个插件XLSX

    .vue文件中: 1. 引用table插件/自己写table布局 <el-table id="my-table"></el-table> 2. 引入依赖

    xing.org1^
  • vue - 使用vue实现自定义多选与单选的答题功能

    xing.org1^
  • vue - v-model实现自定义样式の多选与单选

    来不及研究为什么,我先直接在原来项目上赶紧建了一个test页面,先赶紧实现我的这种设想:

    xing.org1^
  • Vuex基本使用的总结

    在 Vue 的单页面应用中使用,需要使用Vue.use(Vuex)调用插件。 使用非常简单,只需要将其注入到Vue根实例中。

    用户1065635
  • Vuex 2.0 源码分析

    通常,在项目不是很复杂的时候,我们会利用全局事件总线 (global event bus)解决,但是随着复杂度的提升,这些代码将变的难以维护。因此,我们需要一种...

    前端迷
  • Vuex框架原理与源码分析

    Vuex是一个专为Vue服务,用于管理页面数据状态、提供统一数据操作的生态系统。它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action -...

    美团技术团队
  • React进阶(3)-上手实践Redux-如何改变store中的数据

    在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,已经知道组件怎么获取store的数据,并渲染到页面上,那么在该节当中揭示怎么...

    itclanCoder
  • Vuex 文档笔记

    每个Vuex应用的核心是store(仓库)。这个store是一个容器,包含着应用中大部分状态。

    前端_AWhile
  • Redux 异步数据流初探

    用React写的项目中各组件的状态依赖关系非常复杂,为了便于管理组件的状态,使用 Redux。

    一个会写诗的程序员
  • 深入Preact源码分析(四)setState发生了什么

    2、可以看出Preact中setState参数也是可以接收函数作为参数的。将要更新的state合并到当前的state

    flytam

扫码关注云+社区

领取腾讯云代金券