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. 统计文件中的URL

    1. 题目: 一个文本文件中每一行中有一个URL,最多一万行,统计每一个URL的次数,输出到另外一个文件中,每一行前面是URL,后面是个数. 2.代码: package test; import ja ...

  2. Server_Tomcat

    1 Tomcat概述 Tomcat服务器由Apache提供,开源免费.由于Sun和其他公司参与到了Tomcat的开发中,所以最新的JSP/Servlet规范总是能在Tomcat中体现出来.当前最新版本 ...

  3. 【Java】重载(Overload)与重写(Override)

    方法的语法 修饰符 返回值类型 方法名(参数类型 参数名){ ... 方法体 ... return 返回值; } 重载(overload) /** * 重载Overload: * 同一个类中,多个方法 ...

  4. JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等

    JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. jquery 筛选元素 (3)

    .addBack() 添加堆栈中元素集合到当前集合中,一个选择性的过滤选择器. .addBack([selector]) selector 一个字符串,其中包括一个选择器表达式,匹配当前元素集合,不包 ...

  6. JavaScript中并非一切皆对象

    对象是js中的基础以及核心,在js中有六种主要类型:string  number  boolean null undefined object 除了oject类型以为其他五种本身并非对象,null本身 ...

  7. http2.2配置

    http: 超文本传输协议,工作在应用层 CentOS 6程序环境:httpd-2.2 配置文件: /etc/httpd/conf/httpd.conf /etc/httpd/conf.d/*.con ...

  8. python中上双互斥锁的线程执行流程

    import threading def sing(): print('进入sing -----------------') for i in range(3): print('进入sing循环 -- ...

  9. PHP无限分类生成树方法,非递归,引用

    //这个是核心方法 function generateTree($items){     $tree = array();     foreach($items as $item){         ...

  10. POJ 2891 中国剩余定理(不互素)

    Strange Way to Express Integers Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 17877 ...