vuex

https://vuex.vuejs.org/zh/guide/actions.html

单向数据流

单例模式 & 多个组件共享状态

State & 状态注入

Vue.use(Vuex) 将状态从根组件“注入”到每一个子组件中

mapState

Getter

store 的计算属性

mapGetters

Mutation

常量 & 事件类型

mapMutations & 同步事务

Action

https://vuex.vuejs.org/zh/guide/actions.html

mapActions

Async & Promise

Module

局部状态

context && {...obj} , {key1, key2}

namespace

root

Getter (state, getters, rootState, rootGetters) { ... }

Action (ctx, payload) { ... }

mapState, mapGetters, mapActionsmapMutations


computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

createNamespacedHelpers

https://vuex.vuejs.org/zh/api/#mapstate

vue & SSR

https://ssr.vuejs.org/guide/structure.html#avoid-stateful-singletons


Vuex

store data flow

  1. Components ==dispatch==> Actions ==commit==> Mutations ==mutate=> State ==render==> Components

  2. Components ==commit==> Mutations ==mutate=> State ==render==> Components

  • Actions & Async
  • Mutations & Sync

Vuex, api, SSR, module的更多相关文章

  1. 【转】大型Vuex项目 ,使用module后, 如何调用其他模块的 属性值和方法

    Vuex 允许我们把 store 分 module(模块).每一个模块包含各自的状态.mutation.action 和 getter. 那么问题来了, 模块化+命名空间之后, 数据都是相对独立的, ...

  2. 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用

    github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...

  3. webpack入门(四)webpack的api 2 module

    接着介绍webpack的module. module Options affecting the normal modules (NormalModuleFactory)  这些选项影响普通的模块 m ...

  4. Vuex的管理员Module(实战篇)

    Module按照官方来的话,对于新手可能有点难以接受,所以想了下,决定干脆多花点时间,用一个简单的例子来讲解,顺便也复习一下之前的知识点. 首先还是得先了解下 Module 的背景.我们知道,Vuex ...

  5. Vuex白话教程第六讲:Vuex的管理员Module(实战篇)

    写在前面 这一讲是 Vuex 基础篇的最后一讲,也是最为复杂的一讲.如果按照官方来的话,对于新手可能有点难以接受,所以想了下,决定干脆多花点时间,用一个简单的例子来讲解,顺便也复习一下之前的知识点. ...

  6. 挑战全网最幽默的Vuex系列教程:第六讲 Vuex的管理员Module(实战篇)

    写在前面 这一讲是 Vuex 基础篇的最后一讲,也是最为复杂的一讲.如果按照官方来的话,对于新手可能有点难以接受,所以想了下,决定干脆多花点时间,用一个简单的例子来讲解,顺便也复习一下之前的知识点. ...

  7. Vuex里的module选项和移动端布局

    Vuex里的modules 在store文件夹里创建一个modules的文件夹,里面随意创建一个.js文件,然后export输出

  8. Vuex 使用了 module 后的访问方法 ..

    如果 使用了  module 和 namespace state 数据:=>   this.$store.state.User.info  (user 是模块名字. info 是 state 里 ...

  9. intel dpdk api interrupt module 中断模块介绍

    声明:此文档只做学习交流使用,请勿用作其他商业用途 author:朝阳_tonyE-mail : linzhaolover@gmail.comCreate Date: 2013-7-12 11:46: ...

随机推荐

  1. Rxjava+retrofit+mvp整合

    转载请标明出处: http://blog.csdn.net/forezp/article/details/52621898 本文出自方志朋的博客 最近在看Rxjava,写了一个简单的 demo整合了R ...

  2. P2661 信息传递 DFS

    题目链接:洛谷 P2661 信息传递 一个人要想知道自己的生日,就意味着信息的传递是成环的,因为每轮信息只能传递一个人,传递的轮数就等于环的大小 环的大小就等于环中的两个点到第三个点的距离之和加一,我 ...

  3. LunaSchedule记录

    博客访问量突破10000!!!(值得高兴一下 用一学期超级课程表,被50+M的内存占用,巨慢的加载速度给弄烦了,就自己开发了一款课程表管理程式 添加日历订阅,自动导入到系统日历,无需安装任何app L ...

  4. Docker自学纪实(二)Docker基本操作

    安装docker 以CentOS7为例: 安装:yum -y install docker 启动:systemctl start docker 设置开机自启:systemctl enable dock ...

  5. hasOwnProperty自我理解

    暂时不考虑ES6中symbol,hasOwnProperty()方法返回的是一个对象上是否包含一个指定属性,如果含有则返回true,如果没有则返回false.   和 in 运算符不同,该方法会忽略掉 ...

  6. MUI常用脚本及原生JavaScript常用操作元素方法

    1.mui元素转换html元素 var obj=mui("#id")[0]; 2.事件绑定 var btn = document.getElementById("logi ...

  7. laravel环境配置的常见问题

    从开始下载相关软件到现在,整整一天,终于成功了.不得不说官方的说明文档相当详细,毕竟我都成功了,不是吗,哈哈. 好了,不多说了,直接上干货 官方环境配置文档地址:https://laravel-chi ...

  8. MySQL权限管理创建帐户

    权限管理 1.创建账号 # 本地账号 create user 'egon1'@'localhost' identified by '123'; # mysql -uegon1 -p123 # 远程帐号 ...

  9. UOJ #2321. 「清华集训 2017」无限之环

    首先裂点表示四个方向 一条边上都有插头或者都不有插头,相当于满足流量平衡 最大流 = 插头个数*2时有解 然后求最小费用最大流 黑白染色分别连原点汇点

  10. Android stadio 插件推荐--ok gradle

    今天发现了一个好玩的插件,对于想要知道依赖怎么写的同学很有帮助. 写这篇文章的意义在于,以后我忘了的话,可以自己在博客中找到. 上地址: https://github.com/scana/ok-gra ...