【Vue】Vuex
Vuex简介
概念:
专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中管理(读、写),也是一种适用于任意组件间的通信方式。
什么时候用Vuex
①多个组件依赖于同一状态
②来自不同组件的行为需要变更为同一状态
Vuex工作原理
组件在不需要ajax请求后端参数的时候,可以直接通过commit到Mutations而不通过Action
即通过Dispatcher和actions对话,commit和mutation对话
搭建Vuex工作环境
安装vuex
npm i vuex@3
使用vuex插件
main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueRouter from 'vue-router'
import router from './router'
import store from './store'
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(VueRouter)
const vm = new Vue({
render: h => h(App),
router: router,
// 安装全局事件总线
beforeCreate() {
Vue.prototype.bus = this
},
store
}).$mount('#app')
console.log(vm)
/store/index.js
import vuex from 'vuex'
import vue from 'vue'
vue.use(vuex)
const actions = {}
const mutation = {}
const state = {}
export default new vuex.Store(
actions,
mutation,
state
)
vue.use(vuex)不能写在main.js中,因为脚手架解析main.js时会先解析import store再解析vue.use(vuex),导致store/index.js的new vuex.Store不能用
Vuex的使用
组件
<template>
<div>
<h2>Sum:{{$store.state.sum}}</h2><br/>
<select v-model="value">
<option :value="1">1</option>
<option :value="2">2</option>
<option :value="3">3</option>
</select>
<button @click="increase">+</button>
<button @click="decrease">-</button>
<button @click="increaseOdd">odd +</button>
<button @click="increaseWait">wait +</button>
</div>
</template>
<script>
export default {
data() {
return {
value: 1
}
},
methods: {
increase() {
this.$store.commit('INCREASE', this.value)
},
decrease() {
this.$store.commit('DECREASE', this.value)
},
increaseOdd() {
this.$store.dispatch('increaseOdd', this.value)
},
increaseWait() {
this.$store.dispatch('increaseWait', this.value)
}
},
}
</script>
<style>
</style>
store\index.js
import vuex from 'vuex'
import vue from 'vue'
vue.use(vuex)
const actions = {
increaseOdd(context, value) {
if(context.state % 2)
context.commit('INCREASE', value)
},
increaseWait(context, value) {
setTimeout(()=>{
context.commit('INCREASE', value)
},500)
}
}
const mutations = {
INCREASE(state, value) {
state.sum += value
},
DECREASE(state, value) {
state.sum -= value
}
}
const state = {
sum: 0
}
export default new vuex.Store({
actions,
mutations,
state
})
【Vue】Vuex的更多相关文章
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 【vue】移动端demo资料
http://imzjh.com/inew/#/(移动端demo) https://github.com/liangxiaojuan/eleme(饿了么git地址) https://github.co ...
- 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo
¶项目分析 一个完整的网站服务架构,包括: 1.web frame ---这里应用express框架 2.web server ---这里应用nodejs 3.Database ---这里 ...
- 【vue】本地开发mock数据支持
项目离不开数据渲染的支持,为本地开发配置 数据 支持. (一)方式一:安装JSON Server搭建mock数据的服务器 json Server 是一个创建 伪RESTful服务器的工具. 配置流程 ...
- 【vue】npm run mock & npm run dev 无法同时运行的解决
[关于系统,没注明的都是windows系统,若以后用的是mac系统则会另外备注] 当项目数据是通过mock搭建而成(参照:[vue]本地开发mock数据支持)时,运行mock服务器和项目的命令 就参照 ...
- 【VUE】自定义组件
[VUE]自定义组件 转载: ============================================ ======================================== ...
- 【VUE】使用问题记录
[VUE]使用问题记录 ===================================================================== 1.Vue.nextTick 修改数 ...
- 【VUE】数组
[VUE]常用函数 转载:https://www.cnblogs.com/yangchongxing/p/10637087.html 目录 ============================== ...
- 【vue】生成接口模拟数据
目录 方案一:自定义模拟数据 Step1 创建json文件 Step2 在 vue.config.js 中配置 Step3 在组件中使用 (方式一) Step3 封装api (方式二) Step4 在 ...
- 【vue】vue +element 搭建项目,vuex中的store使用
概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...
随机推荐
- 2003031120—廖威—Python数据分析第七周作业—MySQL的安装以及使用
项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/pexy/20sj 这个作业要求链接 https://edu.cnblogs.com/campus/ ...
- 解决SpringBoot前后端集成项目导出jar包运行访问页面资源报错“Whitelabel Error Page”问题
一.SpringBoot前后端集成项目导出jar包后运行访问页面资源报错"Whitelabel Error Page"问题 二.解决方案 1.将Controller层移入com.x ...
- CF1272 C Yet Another Broken Keyboard 题解+代码比对
C. Yet Another Broken Keyboard time limit per test 2 seconds memory limit per test 256 megabytes inp ...
- Javaheima20
Java 学习内容 单元测试 反射 注解 动态代理 开发好的系统中存在很多的方法,如和对这些方法的正确性进行测试 如何在程序运行时取得到Class对象,然后取获得Class中的每个成分 注解是什么,具 ...
- 【Unity】Timeline探索记(4)第二个例子——动作特写/子弹时间
写在前面 这次例子参考这篇实现博文(附带项目下载),博文前面介绍非常具体,可惜后面特写轨实现代码不是按照我想要的标准四大件(data.mixer.clip.track)来组织的,所以这里我略过介绍,只 ...
- idea乱码
第一步:修改intellij idea配置文件: 找到intellij idea安装目录,bin文件夹下面idea64.exe.vmoptions和idea.exe.vmoptions这两个文件,分别 ...
- Abp学习(一) abp+vue +mysql框架搭建
一.到Abp官网下载框架 地址:https://aspnetboilerplate.com/Templates 二.打开项目 修改数据库连接为MySql,默认是SQL Server 2.1.修改链接字 ...
- defer语句
1.defer语句 延时机制,在函数中,经常需要创建资源(比如:数据库连接.文件句柄.锁等),为了在函数执行完毕后,及时释放资源,使用defer a. 当执行defer时,暂时不执行,会将defer后 ...
- 实验七:基于REST API的SDN北向应用实践
(一)基本要求 编写Python程序,调用OpenDaylight的北向接口实现以下功能 (1) 利用Mininet平台搭建下图所示网络拓扑,并连接OpenDaylight: (2) 下发指令删除s1 ...
- delphi中判断IP地址输入的合法性
function GetSubStrCount(sSubStr, sParentStr: string): integer; begin Result := 0; while Pos(UpperCas ...