Vue之Vuex的使用
重点看懂这张图:
重点记住:
1.Mutation 必须是同步函数,即mutations里只能处理同步操作。
2.如果处理的是同步操作可直接commit提交mutations更改state,如果是异步操作则需要通过actions提交mutations。
3.Action 提交的是 mutation,而不是直接变更状态。
4.Action 可以包含任意异步操作。
理解为什么要使用Vuex?
当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
- 对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。
- 对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性,我们的代码将会变得更结构化且易维护。
使用案例:
建立如下目录结构,方便维护
state.js
export default {
count: 0,
firstName: 'Keyan',
lastName: 'Liu'
}
actions.js
export default {
increment(context, n) {
// setTimeout(() => {
// context.commit('increment', n)
// }, 1000)
context.commit('increment', n)
}
}
mutations.js
export default {
increment(state, payload) {
state.count += payload.amount
}
}
getters.js
export default {
fullName(state) {
return `${state.firstName} ${state.lastName}`
}
}
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
about.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<span>{{ count }}</span>
<br>
<button @click="fun({amount: 11})">增加</button>
<br>
<span>{{ fullName }}</span>
<!-- <span>{{ countAlias }}</span> -->
</div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
name: 'About',
beforeRouteEnter(to, from, next) {
console.log('----------before enter--------', this)
next(vm => {
console.log('after enter vm.id is:', vm.id)
})
},
beforeRouteUpdate(to, from, next) {
console.log('-----------upadte enter--------')
next()
},
beforeRouteLeave(to, from, next) {
console.log('------------leave enter----------')
if(global.confirm('are you sure?')) {
next()
}
},
props: ['id'],
mounted() {
console.log(this.id)
console.log(this.$route)
},
computed: {
...mapState([
'count',
]),
...mapGetters([
'fullName'
])
},
methods: {
...mapMutations({
fun: 'increment'
}),
...mapActions({
fun: 'increment'
})
}
}
</script>
结果图
Vue之Vuex的使用的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- Vue之Vuex
一.什么是vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.简单来说就是一个数据统一 ...
- requirejs、vue、vuex、vue-route的结合使用,您认为可行吗?
在五一节之前和一网友讨论前端技术时,对方提到vue.vue-route如果配合requirejs应用.当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复.本是一天 ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- vue:vuex中mapState、mapGetters、mapActions辅助函数及Module的使用
一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: index.js如下: import Vue from 'vue'; import ...
- vue+vue-router+vuex实战
shopping vue + vue-router + vuex实现电商网站 效果展示 install 下载代码: git clone https://github.com/chenchangyuan ...
- 15.vue动画& vuex
Vue.config.productionTip = false; ==是否显示提示信息== ==import/export== export xxx 必须跟跟对象或者和定义一起 对象: export ...
- Vue、Vuex+Cookie 实现自动登陆 。
概述 1.自动登陆实现思路. 2.vuex + cookie 多标签页状态保持. 自动登陆的需求: 1.登陆时勾选自动登陆,退出登陆或登陆到期后再次登陆后自动填写表单(记住密码)或访问登陆页自动登陆. ...
- 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)
阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...
- vue:vuex详解
一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...
随机推荐
- matplotlib 散点图
一.特点 离散的数据,查看分布规律,走向趋势 二.使用 1.核心 plt.scatter(x, y) # x为x轴的数据,可迭代对象,必须是数字 # y为y轴的数据,可迭代对象,必须是数字 # x和y ...
- 10.JavaSE之包机制
包机制: 为了更好的组织类,Java提供了包机制,用于区别类名的命名空间 包语句的语法格式为: package pkg1[ . pkg2[ . pkg3...]]; package com.duan. ...
- Java入门 - 语言基础 - 07.修饰符
原文地址:http://www.work100.net/training/java-modifier-type.html 更多教程:光束云 - 免费课程 修饰符 序号 文内章节 视频 1 概述 2 访 ...
- 2017-10-28 noip模拟赛by WISCO 信息组
第一次做模拟赛,自我感觉良好(大概是这套题比较简单) T1 名称为“数据结构”,这也太坑了点……233 要维护一个数列(初始为零),支持区间加与查询. 查询的是一个区间中有多少数满足min<=( ...
- 个人任务day5
今日计划: 写登录界面,学习如何使用js做出界面跳转的进度条动态显示. 昨日成果: 创建用户数据库.
- STM32学习笔记:基础例子
本例子代码参考了STM32库开发实战指南中的代码,由于使用的板子是尚学STM32F103ZET6,为了配合板上已有资源,也参考了其配套代码.为了便于书写文本,我尽量将代码都写到了一个文件中,这种方式是 ...
- airtest启用本地python环境的方法
实现目标,air如果想引用第三方python库,则需要在本地python欢迎执行运行 1.打开设置,红色箭头处,选择本地python路径 2.安装air的两个核心库airtest和pocoui 安装方 ...
- mysql安装教程linux
https://www.cnblogs.com/YangshengQuan/p/8431520.html 设置sql远程访问
- postman的简单介绍及运用
postman下载地址 https://www.getpostman.com/downloads/ postman的工作原理:发送请求给服务器,服务器处理postman发送的数据然后返回给postma ...
- Python使用requests发送post请求的三种方式
1.我们使用postman进行接口测试的时候,发现POST请求方式的编码有3种,具体的编码方式如下: A:application/x-www-form-urlencoded ==最常见的post提交数 ...