1.严格模式

    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中的
**/

3. state

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

4. getters

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

5. 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

6. 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/getter的更多相关文章

  1. Vue Vuex中的严格模式/实例解析/dispatch/commit /state/getters

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

  2. 一文解析Pinia和Vuex,带你全面理解这两个Vue状态管理模式

    Pinia和Vuex一样都是是vue的全局状态管理器.其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia. 本文将通过Vue3的形式对两者的不同实现方式进行 ...

  3. 实例解析Python设计模式编程之桥接模式的运用

    实例解析Python设计模式编程之桥接模式的运用 这篇文章主要介绍了Python设计模式编程之桥接模式的运用,桥接模式主张把抽象部分与它的实现部分分离,需要的朋友可以参考下 我们先来看一个例子: #e ...

  4. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  5. use vue vuex vue-router, not use webpack

    vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...

  6. vue+vuex初入门

    Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 解决问题: 传参的方法对于多层嵌 ...

  7. [Vue] vuex进行组件间通讯

    vue 组件之间数据传输(vuex) 初始化 store src/main.js import Vuex from "vuex"; Vue.use(Vuex); new Vue({ ...

  8. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  9. vue + vuex 表单处理

    使用场景:在一个表单中,各项数据提交后需要重置表单中各<input>元素的值为空. 组件中关联: <template> <el-form ref="form&q ...

随机推荐

  1. 用前端姿势玩docker【一】Docker通俗理解常用功能汇总与操作埋坑

    前言 首先一句话表达个人对docker的理解:与传统虚拟技术基于硬件及物理资源的虚拟化相比,Docker更加轻量化,docker为基于操作系统或内核级别的虚拟化,并且提供了从各种机制与操作以满足从开发 ...

  2. ATX 学习 (四)-atxserver2

    ATXSERVER2 一.main()文件启动 1.首先通过parse_args返回一个Namespace作一些配置,登录页html在SimpleLoginHandler这个里边写着,2.接着通过db ...

  3. Bash 脚本编程

    概述 Bash (GNU Bourne-Again Shell) 是许多Linux发行版的默认Shell. shell语法 变量 定义:your_name="hellohhy" 使 ...

  4. Mybatis——Mapper代理

    mapper的代理对象生成位于org.apache.ibatis.binding.MapperProxyFactory的newInstance方法,使用jdk的动态代理,代理的InvocationHa ...

  5. R 基础绘图体系-基础篇

    1.高水平绘图函数 生成数据 #模拟100位同学学号及三科成绩 num = seq(12340001,12340100) # 形成学号 x1 = round(runif(100,min = 80,ma ...

  6. 安排上了!PC人脸识别登录,出乎意料的简单

    本文收录在个人博客:www.chengxy-nds.top,技术资源共享. 之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了 ...

  7. org.springframework.beans.factory.UnsatisfiedDependencyException异常

    注解配置不完整 如Service实现类没有加 * @Service * @Transactional

  8. PHP array_intersect_uassoc() 函数

    实例 比较两个数组的键名和键值(使用用户自定义函数比较键名),并返回交集: <?phpfunction myfunction($a,$b){if ($a===$b){return 0;}retu ...

  9. PHP curl_multi_setopt函数

    (PHP 5 >= 5.5.0) curl_multi_setopt — 设置一个批处理cURL传输选项. 说明 bool curl_multi_setopt ( resource $mh , ...

  10. PHP umask() 函数

    ------------恢复内容开始------------ 定义和用法 umask() 函数改变文件的文件权限. 该函数把 PHP 的 umask 设置为 mask & 0777 并返回原来 ...