Vuex状态管理总结
一、什么是 Vuex
1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
2、Vuex 采用集中式存储和管理应用中所有组件的状态
3、Vuex 应用的核心是 store(仓库)-- 包含 state(组件中的共享状态)和 mutations(改变状态的方法)
二、Vuex 的安装
1、在项目根目录终端引入:
npm install vuex --save
2、在 main.js 中加入:
import store from './store'
三、Vuex 核心概念
1、State
state 可以看作是所有组件的 data,用于保存所有组件的公共数据。
2、Getters
getters 可以看作是所有组件的 computed 属性,getters 的返回值会根据它的依赖被缓存起来,只有当它的依赖值发生改变才会被重新计算。
3、Mutations
mutations 可以看作是 store 中的 methods,其中保存着更改数据的回调函数。
4、Actions
actions 类似于 mutations,区别在于:
- actions 提交的是 mutations 而非直接变更状态
- actions 中可以包含异步操作,而mutations 中不允许出现异步
5、Modules
由于使用单一状态树,当应用变得非常复杂时,store 对象会变得相当臃肿,Vuex 允许将 store 分割成模块(module)。每个模块拥有自己的 state、mutations、actions、getters、甚至是嵌套子模块——从上至下进行同样方式的分割:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
} const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
} const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}) store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
四、Vuex 的使用
1、Vuex 获取 store 数据
通过 store.state 来获取状态对象,示例:
store.js 文件:
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
num:
},
mutations: {
changeFunction (state, num) {
state.num++
}
}
})
main.js 文件:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' Vue.config.productionTip = false new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
views/demo.vue 文件:
<template>
<div>
<p>{{msg}}</p>
<button @click="getNum">getNum</button>
</div>
</template> <script>
export default {
data () {
return {
msg: ''
}
},
methods: {
getNum () {
this.msg = this.$store.state.num
}
}
}
</script>
运行效果:
2、Vuex 修改 store 数据
通过 store.dispatch 方法触发状态变更,示例:
store.js 文件:
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
num:
},
mutations: {
changeFunction (state, num) {
state.num++
}
},
actions: {
changeNum ({ commit }, obj) {
commit('changeFunction', obj)
}
}
})
main.js 文件:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' Vue.config.productionTip = false new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
views/demo.vue 文件:
<template>
<div>
<p>{{msg}}</p>
<button @click="getNum">getNum</button>
<button @click="changeNum">changeNum</button>
</div>
</template> <script>
export default {
data () {
return {
msg: ''
}
},
methods: {
getNum () {
this.msg = this.$store.state.num
},
changeNum () {
this.$store.dispatch('changeNum', )
this.msg = this.$store.state.num
}
}
}
</script>
运行效果:
Vuex状态管理总结的更多相关文章
- vuex状态管理-数据改变不刷新
困惑: 在页面初始化的时候,我提交到vuex状态管理,然后在获取的时候获取不到,我找到了出错的地点,并进行了修改,然后可以获取到状态 但是不知道原因? 定义了如下的state const state ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- vuex状态管理demo
vuex状态管理主要包含四个概念 mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法
一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...
- VueX状态管理器 的应用
VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from 'vue' import Vuex from 'vuex' vue.use(Vue ...
- vue第十八单元(单向数据流 vuex状态管理)
第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...
- Vuex 状态管理的工作原理
Vuex 状态管理的工作原理 为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时,经常会遇到一些组件间共享的数据或状态,或是需要通过 props 深层传递的一些数据.在应用规模较小 ...
- vue 通信:父子通信、兄弟通信、跨多层通信、vuex状态管理
之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...
- vuex状态管理,state,getters,mutations,actons的简单使用(一)
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
随机推荐
- Java语言和JVM的使用说明书
Java Language and Virtual Machine Specifications 详细介绍了Java语言各个版本的功能/JVM的工作原理 建议详读/深度 各个版本,在线看或者pdf下载
- 【Tools】UltraISO官网最新板+注册码
官网最新UltraISO 9.7版本安装文件,非注册机,亲测可用,若注册码失效,评论会删除. 土豪赏逼地址: https://download.csdn.net/download/qq_1818716 ...
- QT5.10+MinGW+OpenCV3.4.2编译
一.准备工作: (1)在OpenCV官网下载3.4.2版本(注意选择Win pack),https://opencv.org/releases.html. (2)下载Contrib模块,https:/ ...
- layui父页面执行子页面方法
parent.window[layero.find('iframe')[0]['name']].子页面方法(); layero.find('iframe')[0].contentWindow.子页面方 ...
- Maven 相关知识点解释
在PC端上面关于Maven的安装等情况我这里就不再复述了,不懂的请自行百度谷歌. 今天聊一下Maven 里面的结构,及相关依赖解释. groupId,artfactId,version,type,cl ...
- PostgreSql11.5源码安装
参考:https://yq.aliyun.com/articles/675687/ 1.先下载postgresql11.5的源码包:https://www.postgresql.org/ftp/sou ...
- PHP 可变参数
<?php //php 可变参数 function concatenate( ...$strings): string { $string = ''; //此时的strings 是一个数组 fo ...
- Android--Bitmap处理、圆角、圆形
/** * 转换图片成圆形 * * @param bitmap * 传入Bitmap对象 * @return */ public static Bitmap toRoundBitmap(Bitmap ...
- 使用PHP开发HR系统(2)
本节讲述如何创建基于CI框架的PHP程序. ============================================================================== ...
- spring boot 拦截 以及Filter和interceptor 、Aspect区别
一.通过Filter这个大家很熟悉了吧,这是java规范的一个过滤器,他会拦截请求.在springboot中一般有两种配置方式.这种过滤器拦截并不知道你用的是哪一个Controller处理也不知道你用 ...