严格模式

    import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default new Vuex.Store({
strict: true, //严格模式开启
state: { // 全局state
},
modules:{ // 外部模块
},
getters, // 全局getters
mutations, // 全局mutation
actions, // 全局actions
})
// 如果在vue页面中直接修改state 会报错
this.$store.state.namespace.stateName= '直接修改state'
// Error: [vuex] Do not mutate vuex store state outside mutation handlers.

this.$store 实例解析

// 在主入口文件main.js 或者 index.js 中,一旦引入并use了store实例后,
// 在new Vue({})之后,
// 便可以在任意vue文件中使用 this.$store来使用store中state/action/mutation
import store from './store'
Vue.use(store)
new Vue({
router,
store,
template: '<app/>',
components: { App }
}) // A.vue
console.info(this.$store)
/**
commit: ƒ (e,t,a)
dispatch: ƒ (e,t)
getters: {…} // 包含了在 new Vuex.Store({getters})的所有属性
strict: true
_actionSubscribers: []
_actions: // 包含全部的action, 全局的和module中的
_committing: false
_modules: c {root: s}
_modulesNamespaceMap: // 每个单独module的命名空间 /user, /dictionary, /list
_mutations: // 包含全部的mutations, 全局的和module中的
_subscribers: []
state: (...) // 包含全部的state, 全局的和module中的
**/

state

    // 直接调用 state
console.info('this.$store.state.user.flag:', this.$store.state.user.flag)

getters

    // 直接调用 getters(前提是在getter中声明了某个state), example: flag: state => state.user.flag,
console.info('this.$store.getters.flag:', this.$store.getters.flag)
// 会获取同样的值

dispatch

    // dispatch执行的 action
// this.$store.dispatch('user/actionName') // demo
console.info(' ##### Before dispatch #####')
this.$store.dispatch('StartLoading')
console.info('this.$store.state.loading:', this.$store.state.loading) // true
this.$store.dispatch('EndLoading')
console.info(' ##### After dispatch #####')
console.info('this.$store.state.loading:', this.$store.state.loading) // false

commit

    // commit执行的是mutation
// this.$store.commit('namespace/mutationName') // demo
console.info(' ##### Before commit #####')
console.info('this.$store.state.user.flag:', this.$store.state.user.flag) // I am flag
console.info('this.$store.getters.flag:', this.$store.getters.flag) // I am flag
this.$store.commit('user/SET_FLAG', 'commit mutation to change state')
console.info(' ##### After commit #####')
console.info('this.$store.state.user.flag:', this.$store.state.user.flag) // commit mutation to change state
console.info('this.$store.getters.flag:', this.$store.getters.flag) // commit mutation to change state

Vue Vuex中的严格模式/实例解析/dispatch/commit /state/getters的更多相关文章

  1. Vue Vuex 严格模式+实例解析+dispatch/commit + state/getter

    1.严格模式 import getters from './getters' import mutations from './mutations' import actions from './ac ...

  2. C# 动态生成word文档 [C#学习笔记3]关于Main(string[ ] args)中args命令行参数 实现DataTables搜索框查询结果高亮显示 二维码神器QRCoder Asp.net MVC 中 CodeFirst 开发模式实例

    C# 动态生成word文档 本文以一个简单的小例子,简述利用C#语言开发word表格相关的知识,仅供学习分享使用,如有不足之处,还请指正. 在工程中引用word的动态库 在项目中,点击项目名称右键-- ...

  3. 如何去除vue项目中的 # --- History模式

    来自:https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 侵删 使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现 ...

  4. PHP中“简单工厂模式”实例讲解

    原创文章,转载请注明出处:http://www.cnblogs.com/hongfei/archive/2012/07/07/2580776.html 简单工厂模式:①抽象基类:类中定义抽象一些方法, ...

  5. mysql中limit的用法实例解析

    mysql中limit的用法解析. 在mysql中,select * from table limit m,n.其中m是指记录开始的index,从0开始,n是指从第m条开始,取n条. 例如: mysq ...

  6. Asp.net MVC 中 CodeFirst 开发模式实例

    昨天写的这篇博客因为下班时间到了忘记保存了,好郁闷,得重新写一遍.实习所在公司使用的是CodeFirst开发模式,最近开始参与到公司的项目里面来了,发现这个模式特别好用,建库建表改变字段属性添加删除字 ...

  7. vuex中strict严格模式

    开启严格模式,仅需在创建 store 的时候传入strict: true const store = new Vuex.Store({ state, strict:true//开启严格模式后,只能通过 ...

  8. PHP中“简单工厂模式”实例讲解(转)

      ? 1 2 3 4 5 6 7 8 原创文章,转载请注明出处:http://www.cnblogs.com/hongfei/archive/2012/07/07/2580776.html   简单 ...

  9. python中super的用法实例解析

    概念 super作为python的内建函数.主要作用如下: 允许我们避免使用基类 跟随多重继承来使用 实例 在单个继承的场景下,一般使用super来调用基类来实现: 下面是一个例子: class Ma ...

随机推荐

  1. MySQL数据库---数据库备份、视图、触发器、事物、存储过程、函数和索引

    备份 方法: 使用mysqldump实现逻辑备份 语法: mysqldump -h 服务器 -u用户名 -p密码 数据库名 > 备份文件.sql 单库备份: mysqldump -uroot - ...

  2. C++语法小记---运算符重载

    运算符重载 运算符重载的本质也是对已有功能的扩展 运算符重载的本质就是函数重载,只是函数变成了 operator + 运算符 当成员函数和全局函数对运算符进行重载时,优先调用成员函数 运算符重载为成员 ...

  3. 写verilog程序需要注意的地方

    1.在always块语句中一定要注意if-else if-else if-else的判断条件的顺序. 2.同一个寄存器信号只能在同一个always or initial 块中进行赋值. 3.在控制一个 ...

  4. 学习 bypass csp记录

    最近看到一篇bypas csp的记录复现学习下 配置csp 这里直接设置html头达到配置csp的效果. Content-Security-Policy: script-src 'self' 'uns ...

  5. 重学c#系列——c# 托管和非托管资源与代码相关(四)

    前言 这是续第三节. 概况垃圾回收与我们写代码的关系: 强引用和弱引用 针对共享 Web 承载优化 垃圾回收和性能 应用程序域资源监视 正文 强引用和弱引用 垃圾回收器不能回收仍在引用的对象的内存-- ...

  6. centos7.5安装gdal编译环境

    安装准备的环境: 名称 类型与版本 软件连接 服务器 linux-centos7.5   jdk 1.8.0_25   ant 1.9.14 http://mirror.bit.edu.cn/apac ...

  7. 使用brew services管理服务

    简介 官网: https://github.com/Homebrew/homebrew-services macOS使用launchctl命令加载开机自动运行的服务,brew service可以简化l ...

  8. Zabbix3.2安装

    一.环境 OS: CentOS7.0.1406 Zabbix版本: Zabbix-3.2 下载地址: http://repo.zabbix.com/zabbix/3.2/rhel/7/x86_64/z ...

  9. Redis在Linux下的安装

    一.下载地址 ①redis中文网下载地址:http://www.redis.cn/ ②百度云网盘下载地址:https://pan.baidu.com/s/1UQcF9V3lwA0fxquM_JFMZw ...

  10. python Scrapy 从零开始学习笔记(二)

    在之前的文章中我们简单了解了一下Scrapy 框架和安装及目录的介绍,本章我们将根据 scrapy 框架实现博客园首页博客的爬取及数据处理. 我们先在自定义的目录中通过命令行来构建一个 scrapy ...