Vue状态管理器state（Vuex）

一、什么是Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式
采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

二、什么是状态管理模式

状态自管理应用包含以下几个部分
- state，驱动应用的数据源
- view，以声明方式将 state 映射到视图
- actions，响应在 view 上的用户输入导致的状态变化
什么时候使用
- 多个视图依赖同一个状态
- 来自不同视图的行为需要变更同一个状态
分模块，每个模块内需要包含
- state：初始化的数据
- actions：执行的异步操作
- mutations：唯一改变数据的方式
- namespaced：命名空间

三、分模块创建状态管理器

子模块user.js结构

// 初始化的数据
const state = {loginState: localStorage.getItem('isLogin') || '',userId: localStorage.getItem('userId') || '',token: localStorage.getItem('token') || ''
}// 执行的异步操作
const actions = {}// 唯一改变数据的方式
const mutations = {change_loginState (state, payload) {state.loginState = payload},change_userId (state, payload) {state.userId = payload},change_token (state, payload) {state.token = payload}
}export default {namespaced: true, // 改变mutations，可以直接使用user/change_loginStatestate,actions,mutations
}

主模块引用user.js子模块

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user.js'Vue.use(Vuex)export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {//在modules下进行引入user}
})

四、组件中使用Vuex

登录页面，登录成功之后改变Vuex的状态
- 组件内提交mutations，使用this.$store.commit()

// 登录成功之后，修改状态管理器的状态
this.$store.commit('user/change_loginState', 'ok')
this.$store.commit('user/change_token', res.data.token)
this.$store.commit('user/change_userId', res.data.id)

使用状态管理器中的状态，读取

// 状态管理器.状态.模块.属性
this.$store.state.user.loginState === 'ok'this.$store.state.user.userId

五、mapState辅助函数的使用

主要用来获取状态，需要配合计算属性实现
- 组件中提前引入Vuex的辅助函数import { mapState } from 'vuex'

// 固定写法，利用解构赋值，获取state中的loginState，userId
computed: {...mapState({loginState: state => state.user.loginState,userId: state => state.user.userId})}

可以直接使用this.loginState或this.userId找到对应状态

组件的导航守卫中无法使用this找到实例

六、mapMutations辅助函数的使用

组件中提交mutations的简化写法，需要配合methods实现
- 组件中提前引入Vuex的辅助函数import { mapMutations } from 'vuex'

methods: {...mapMutations({change_loginState: 'user/change_loginState',change_userId: 'user/change_userId',change_token: 'user/change_token'})}

可以替换掉commit系列方法

// this.$store.commit('user/change_loginState', 'ok')
// this.$store.commit('user/change_token', res.data.token)
// this.$store.commit('user/change_userId', res.data.id)this.change_loginState('ok')
this.change_token(res.data.token)
this.change_userId(res.data.id)

Vue状态管理器state（Vuex）相关推荐

Vue的状态管理器：Vuex
无需原生开发基础,也能完美呈现京东商城.<混合开发京东商城系统,提前布局大前端>课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合开发经典电商APP--京东.课程将各 ...
flux react php,Vue的Flux框架之Vuex状态管理器
学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 Re ...
vue项目的状态管理器(Vuex)
一.什么是vuex Vuex是vue项目的状态管理器(状态管理工具).vue项目的状态是通过vue实例(组件)绑定的变量来体现.所以也可以说vuex是用来管理vue项目中的各种变量(vue项目中的组件 ...
VueX（Vue状态管理模式)
一.初识VueX 1.1 关于VueX VueX是适用于在Vue项目开发时使用的状态管理工具.试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护 ...
Vue状态管理vuex
转: https://www.cnblogs.com/xiaohuochai/p/7554127.html 前面的话由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为 ...
【Vue.js】全局状态管理模式插件vuex
文章目录全局状态管理模式Vuex vuex是什么? 什么是"状态管理模式"? vuex的应用场景 Vuex安装开始核心概念一.State 1.单一状态树 2.在 Vue 组 ...
Vue开发实例（14）之Vue状态管理store
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
[react] 状态管理器解决了什么问题？什么时候用状态管理器？
[react] 状态管理器解决了什么问题?什么时候用状态管理器? 专注 view 层 React 官网是这么简介的.JavaScript library for building user inter ...
Pinia下一代vue状态管理工具
建议大家结合上一篇文章学习:vite+vue script setup语法糖写法:style'me的个人博客 1.pinia是什么? Pinia是一个围绕Vue 3 Composition API的 ...

Vue状态管理器state（Vuex）

一、什么是Vuex

二、什么是状态管理模式

三、分模块创建状态管理器

四、组件中使用Vuex

五、mapState辅助函数的使用

六、mapMutations辅助函数的使用

Vue状态管理器state（Vuex）相关推荐

最新文章

热门文章