Vuex数据管理详解
Vuex数据管理详解
Vuex数据管理详解Vue路由守卫详解
Vuex是一个专为Vue.js应用开发的状态管理模式，集中式存储管理应用所有组件的状态。
Vuex遵循“单向数据流”理念，易于问题追踪以及提高代码可维护性。
Vue中多个视图依赖于同一状态时，视图间传参和状态同步比较困难，Vuex能够很好解决该问题。
actions：做一些业务逻辑，比如异步操作，处理复杂的业务逻辑，类似于controller
getters: 派生状态用法，根据当前状态计算其他值，计算属性
安装Vuex
//安装命令 vue add vuex
核心概念
- state状态、数据
- mutations 更改状态的函数
- actions异步操作，处理复杂业务逻辑
- store 包含以上概念的容器
mutations与actions区别
mutations只修改状态，修改状态只能通过mutations修改
actions处理复杂业务逻辑，修改状态还得是mutations
状态和状态变更
state保存数据状态，mutations用于修改状态，
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 状态
state: {
count: 0
},
//改状态的函数
mutations: {
add(state,num = 1){
state.count += num;
}
},
//派生状态函数
getters: {
//根据当前状态计算其他值，派生用法
score(state){
return 'score:' + state.count
}
},
//做复杂业务逻辑，异步操作，比如ajax请求 类似于controllers
//业务场景：1、异步请求 2、同时修改多个状态（外围只要dispatch一次就好了）
actions: {
// {commit,state,getters} 解构上下文参数，后边num跟通知的参数
asyncAdd({commit,state,getters},num = 1){
//1.只修改状态
// setTimeout(()=>{
// commit('add', num)
// },1000)
//1.修改状态 2.通知外围调用者去做其他操作
return new Promise((resolve,reject)=>{
//模拟异步操作，执行成功通知修改状态 且通知外围的调用者去做一些其他的操作
setTimeout(()=>{
commit('add', num)
//成功
resolve({ok:1})
//失败
// reject({ok:0})
},1000)
})
}
}
})
//main.js
import Vue from 'vue'
import App from './App'
import store from './store.js'
Vue.config.productionTip = false
Vue.use(store)
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
//VuexTest.vue
<template>
<div>
<h3>vuex test</h3>
<!-- 基本用法 -->
<p>{{$store.state.count}}</p>
<!-- getters：派生状态（计算属性） -->
<p>{{$store.getters.score}}</p>
<!-- mutations：修改状态 -->
<button @click="add">add</button>
<!-- actions：异步操作 -->
<button @click="asyncAdd">asyncAdd写法1</button>
<button @click="asyncAdd2">asyncAdd写法2</button>
</div>
</template>
<script>
export default {
methods: {
add() {
//单向数据流 不建议这样修改
// this.$store.state.count += 1
//mutations修改值状态 commit
this.$store.commit('add',2);
},
//Promise返回写法
asyncAdd(){
//actions修改值状态 dispatch
this.$store.dispatch('asyncAdd', 3).then((result)=>{
if(result.ok === 1){
//路由跳转。。
alert('操作成功')
}
}).catch(()=>{
alert('操作失败')
});
},
//async 结合 await写法
async asyncAdd2(){
//actions修改值状态 dispatch
const result = await this.$store.dispatch('asyncAdd', 3);
if(result.ok === 1){
//路由跳转。。
alert('操作成功')
}else{
alert('操作失败')
}
}
}
}
</script>
<style>
</style>
Vuex数据管理详解相关教程
-
GCC详解
GCC详解 一、GCC编译过程 在使用gcc编译程序时，编译过程可以细分为４个阶段： 预处理 (Pre-Processing) 编译 (Compiling) 汇编 (Assembling) 链接 (Linking) 编译过程 二、使用GCC 查看GCC版本 gcc -v 各个编译阶段 这里引入一个例子 // hello.c #include st
-
实战！实战！Ansible部署高可用Open stack平台详解
实战！实战！Ansible部署高可用Open stack平台详解 实战！实战！Ansible部署高可用Open stack平台详解 首先配置网络 网络配置，两张网卡：vmnet0桥接到物理网卡；vmnet1仅主机模式。 两个compute端和controller的配置相同 server_back的网卡配置 虚拟机文件里
-
iOS动画-CALayer布局属性详解
iOS动画-CALayer布局属性详解 本篇主要内容： 1.Frame与Bounds的区别 2.中心点(position)与锚点(anchorPoint) 3.视图与图层的坐标系 一、Frame与Bounds的区别 我们已经知道UIView的很多布局属性其实都来自于图层；UIView的布局属性包括:frame、bouns、center
-
VuePress 侧边栏使用详解
VuePress 侧边栏使用详解 前言 官网写的侧边栏教程真的是让人很糟心，经过一番摸索，总算大致弄清楚了，下面详细说一下用法： 目录结构： docs根目录下有一个README.md、chinese文件夹、english文件夹 最简侧边栏： sidebar: { '/language/chinese/': [ '', /
-
笃学私教：Lombok入门使用教程及其优缺点详解
笃学私教：Lombok入门使用教程及其优缺点详解 在Java开发中，因工作需要，你可能会学习或被迫去学习Lombok这个工具，这玩意用起来可以说是贼爽，很方便，可玄武老师实际上并不推荐大家使用，至于Lombok是什么？怎么入门？为什么不推荐使用？下面，玄武老师会
-
viewport详解
viewport详解 这次想聊聊移动开发相关的事。是的，你没有看错，一句话就可以开始你的移动前端开发。 你心里一定在想，什么话这么酷，能够瞬间带入到移动前端开发的世界。 但其实它一点也不新奇，不复杂。 viewport简介 没错，就是viewport特性，一个移动专属
-
vue-carousel-3d轮播图效果，实例详解，可实现宽度自适应
vue-carousel-3d轮播图效果，实例详解，可实现宽度自适应 如图所示，这是一个大屏项目的3d轮播图效果，下面跟着我来详细实现这个轮播效果。官网地址：https://wlada.github.io/vue-carousel-3d/ 如图所示，这是轮子工厂里面的vue-carousel-3d插件中的一些参数
-
攻防世界 Crypto 新手练习区 1-12 全详解
攻防世界 Crypto 新手练习区 1-12 全详解 前言 本篇是攻防世界 Crypto 新手练习区的全解 下下来一个txt 打开是最基础的base64 直接解就是了 下下来一个txt 由小写字母，{}，_构成 结合题目 应该是凯撒加密 即明文中的所有字母都在字母表上向后（或向前）按照