vuex 状态管理 通俗理解
解释:集中响应式数据管理,一处修改多处使用,主要应用于大中型项目。
安装:
第一:index.js:(注册store仓库)
npm install vuex -D // 下载vuex
import Vue from 'vue';
import vuex from 'vuex' // 全局引入
Vue.use(vuex) // 全局注册
import actions from './actions.js';
import mutations from './mutations.js';
import getters from './getters.js';
import state from './state.js';
export default new Vuex.Store({ // 创建状态管理(大写)
actions,mutations,getters,state
}) 第二: main.js:(在根组件内挂载store)
import store from './store/index.js' // 根组件
new Vue({
el: '#app',
render: h => h(App),
router, // 路由挂载
store, // 状态管理挂载
}) 原理:
用户提交请求到Actions(如:this.$store.dispatch{type:'showNav'})===> Actions将类型和数据提交给mutations ===> mutations修改state的值 ===> 用户通过getters拿到结果。 流程:
第1步:types.js: (使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名)
export const SHOW_NAV = 'SHOW_NAV';
export const HIDE_NAV = 'HIDE_NAV';
export const SHOW_FOOT = 'SHOW_FOOT';
export const HIDE_FOOT = 'HIDE_FOOT'; 第2步: Actions:(处理逻辑,将处理的结果给mutations)
(通过commit返回给mutations,state是仓库的容器,payload是@click=" addItem(items) "传递过来的数据)
// 引入types文件,并遍历
import {SHOW_NAV,HIDE_NAV,SHOW_FOOT,HIDE_FOOT} from './types.js' // 第1种遍历的方法
import * as types from './types.js' // 第2种遍历的方法,类似遍历types文件所有的对象 export default {
showNav:({commit,state} ,payload )=>{
commit(types.SHOW_NAV)
},
hideNav:({commit,state},payload)=>{
commit(types.HIDE_NAV)
// console.log(payload) // 拿到数据
},
showFoot:({commit,state})=>{
commit(types.SHOW_FOOT)
},
hideFoot:({commit,state})=>{
commit(types.HIDE_FOOT)
},
addItem:({commit,state},payload)=>{ // 加入购物车
let find = false;
state.buycar.forEach((item,index)=>{
if(item.id == payload.id){ //有商品即数量累加
item.number++;
find = true;
}
});
commit(types.ADD_ITEM,state.buycar) // 传递载荷(参数)给mutations
}
} 第3步: mutations: (做数据突变,用action传递过来的参数,直接修改state的键值)
export default {
[types.SHOW_NAV]:(state)=>{state.bNav = true}, // state为第3步的状态对象
[types.HIDE_NAV]:(state)=>{state.bNav = false},
[types.SHOW_FOOT]:(state)=>{state.bFoot = true},
[types.HIDE_FOOT]:(state)=>{state.bFoot = false},
[types.SHOW_LOADING]:(state)=>{state.bLoading = true},
[types.HIDE_LOADING]:(state)=>{state.bLoading = false},
[types.ADD_ITEM]:(state,payload)=>{
state.buycar = payload; // payload就是action传递过来的参数
},
} 第3步: state: (接收mutations修改过后的状态)
export default {
bNav:true,
bFoot:true,
bLoading:false,
buycar:[],
} 第4步: getters: (获取state对象里面的键值)
export default {
getNav:(state)=>{return state.bNav}, // 返回state状态到vuex身上
getFoot:(state)=>{return state.bFoot},
getLoading:(state)=>{return state.bLoading},
getBuycar:(state)=>{return state.buycar},
} 第5步: 使用状态管理:
<!--使用状态管理-->
<template>
<navbar v-show="getNav"></navbar> (5)结果的使用
<span @click="addItem(items)">订阅</span> (4)通过点击事件触发actions方法(也可以通过钩子函数触发this.$store.dispatch( { type:'show_nav',payload:'2'} ))或者this.$store.dispatch('show_nav,{payload:2}')
</template> (1)解构状态管理,从vuex身上结构mapGetters、mapActions,得到getters、actions身上全部的方法集合
import { mapActions, mapGetters } from 'vuex';
export default {
methods: {
(2) mapActions接管===》方法methods // 使用延展操作,解决自定义与mapgetters的并存
...mapActions(
['addItem', 'changeItem', 'emptyItem', 'deleItem']
)
},
computed: {
(3) mapGetters接管===》计算属性computed // 使用延展操作解决自定义与mapgetters的并存
...mapGetters(
[ ' getNav ' , ' getFoot ' ,'getBuycar']
)
},
} 触发状态管理的方法:
第一种:已经解构mapActions的情况下,通过点击事件决定时机触发actions里的方法,案例如上:;
第二种:没有解构mapActions时,通过钩子函数决定时机,然后this.$store.dispatch( { type:'show_nac',payload: } )
状态管理的应用:(导航栏的显示隐藏)
在根组件下,监听路由变化,来决定是否隐藏显示
watch:{ // 状态监听
$route(to,from){
console.log(to,from) // to去向的路由 from来自哪个的路由
let path = to.path; // 拿到路由 ,如:/home
if(/user|login/){
this.$store.dispatch({type:'show_nav',payload:'xxoo'})
}
}
} 总结
Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:
应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。
只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件太大,只需将 action、mutation 和 getter 分割到单独的文件。
对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。 组合 Action
Action 通常会异步的请求,那么如何知道 action 什么时候结束呢?更重要的是,我们如何才能组合多个 action,以处理更加复杂的异步流程?
首先,你需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise:
(通俗的讲,如果action内执行的是ajax请求,那返回的是promise,也就是可以通过then接收)
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
} 现在你可以:
store.dispatch('actionA').then(() => {
// ...
})
在另外一个 action 中也可以:
actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
} 最后,如果我们利用 async / await,我们可以如下组合 action:
// 假设 getData() 和 getOtherData() 都是ajax请求返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
} 一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行。
vuex 状态管理 通俗理解的更多相关文章
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- vue第十八单元(单向数据流 vuex状态管理)
第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...
- Vuex 状态管理的工作原理
Vuex 状态管理的工作原理 为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时,经常会遇到一些组件间共享的数据或状态,或是需要通过 props 深层传递的一些数据.在应用规模较小 ...
- vuex状态管理-数据改变不刷新
困惑: 在页面初始化的时候,我提交到vuex状态管理,然后在获取的时候获取不到,我找到了出错的地点,并进行了修改,然后可以获取到状态 但是不知道原因? 定义了如下的state const state ...
- vuex状态管理demo
vuex状态管理主要包含四个概念 mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...
- 前端技术之:如何在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状态管理
之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...
随机推荐
- 使用dom4j 解析xml文件
//使用dom4j 解析xml文件,升级版,dom4j是对dom的封装 //重点 package com.offcn.utils; import java.io.File; import java.i ...
- SystemUI
1.Status bars(状态栏) 2.Navigation bars(导航栏) 3.Notification(通知) 4.Keyguard(锁屏) 5.Quick settings(快速设置) 6 ...
- RecyclerSwipeAdapterDemo【使用AndroidSwipeLayout用于列表项侧滑功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录AndroidSwipeLayout搭配Recyclerview实现列表项侧滑功能. 效果图 代码分析 适配器类中设置Swipe ...
- 几个常用的vscode插件
1.Vetur 可以对.vue文件格式做语法高亮,开发基于Vue项目的标配插件 2.Power Mode 在写代码时出现如烟花.粒子.火焰之类的效果,增加写代码的乐趣 3.Chinese (simpl ...
- 强化学习(十一) Prioritized Replay DQN
在强化学习(十)Double DQN (DDQN)中,我们讲到了DDQN使用两个Q网络,用当前Q网络计算最大Q值对应的动作,用目标Q网络计算这个最大动作对应的目标Q值,进而消除贪婪法带来的偏差.今天我 ...
- DirectX11 初探XMVECOTR&XMMATRIX
初探DX11的数学库:向量XMVECOTR,矩阵XMMATRIX |XMVECTOR(XNA数学库的向量) DirectX中的一个核心数据类型为 XMVECTOR对它的运算可以使用SIMD指令集加速( ...
- 百度地图DEMO-路线导航,测距,标点
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- NFS服务和DHCP服务讲解(week3_day2)--技术流ken
NFS服务端概述 NFS,是Network File System的简写,即网络文件系统.网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS: NFS允许一个系统在网络上与他人共享目录 ...
- javascript函数调用中的方法调用模式
最近想起来之前看过的一种js语法,感觉很实用,但是又想不起来具体的写法.然后在网上浏览了一段时间,终于成功的再现了记忆中的那种语法,嗯~,还是那个熟悉的味道! 代码如下: <script> ...
- Add In 简介(主要翻译于ESRI官方文档)
为ArcGIS桌面端建立Add In插件 平时以工作为主,有空时翻译一些文档,顺便练习英文,这个是因为用Add In来学习一下. 主要包括: 关于Add In 什么时候使用Add In Python ...