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. 【Java】Maven安装、Eclipse配置以及相关错误解决集合

    作者呕血总结,下面写的每一个错误我都遇过 · Maven安装 · Eclipse配置 · Maven安装 安装前请确保已经装有JDK. 一. 准备Maven程序包 到官网https://maven.a ...

  2. git(将现有项目加入osChina)

    将现有项目加入osChina 在osChina中创建项目 注意不要初始化项目.(其实初始化也没有什么问题,可以直接clone到本地,再把项目添加进去就行了,后续操作一样的) 项目现在基本为空,得到项目 ...

  3. java多线程同步以及线程间通信详解&消费者生产者模式&死锁&Thread.join()(多线程编程之二)

    本篇我们将讨论以下知识点: 1.线程同步问题的产生 什么是线程同步问题,我们先来看一段卖票系统的代码,然后再分析这个问题: package com.zejian.test; /** * @author ...

  4. 在ubuntu中docker的简单使用(一)

    >>docker version 当运行docker version 命令出现Cannot connect to Docker daemon. Is the docker daemon r ...

  5. CRC32为例详细解析(菜鸟至老鸟进阶)

    CRC-知识解析 cyclic redundancy check 写在前面的话: 之前在做学校项目的时候用到了CRC 原理,但在网上查找的过程中,发现讲解CRC知识的资源很多,但是对新手比较友好的.讲 ...

  6. Codeforces#498F. Xor-Paths(折半搜索)

    time limit per test 3 seconds memory limit per test 256 megabytes input standard input output standa ...

  7. GUI测试问题汇总

    1.ajax实现的页面元素定位问题 最近在做项目的时候遇到一个问题,通过xpath定位到元素后做一个循环操作,第一循环可以正常执行,第二次循环后就报错,错误信息:Message: The elemen ...

  8. Shell学习——终端打印

    1.echo1.1.默认情况下,echo在每次调用后会添加一个换行符1.2.待打印的内容,可以用单引号.双引号或者直接打印,不同的方式,有各自的限制1.2.1.使用不带引号的echo时,没法打印分好( ...

  9. is和==,encode和decode

    0.编码解码 >encode和decode a = "你好" s = a.encode("GBK") print(s) # b'\xc4\xe3\xba\ ...

  10. python scrapy实战糗事百科保存到json文件里

    编写qsbk_spider.py爬虫文件 # -*- coding: utf-8 -*- import scrapy from qsbk.items import QsbkItem from scra ...