vuex的展示图

1. vuex 的基本结构

const store = new Vuex.Store({state: {} //相当于 vue结构中的 data getters: {}, // 相当于vue结构中的计算属性使用actions: {}, // 相当于vue结构中的监听属性使用mutations: {},//相当于vue结构中的 methods 方法集合 （其中方法第一个参数为vuex的参数，第二个为调用时传递的参数 ）modules:{} //  其中客包含另一个vuex 存在，相当大的模块包
})

1.1 vuex 数据持久化设置

数据持久化设置:

2. vuex 的基本使用

import Vue from 'vue'
import Vuex from 'vuex'
import router from '@/router/router.js'Vue.use(Vuex)export default new Vuex.Store({state: {// isOpen: localStorage.getItem("EP_ADMIN_isOpen") == 'true' ? true : false,// isFixed: localStorage.getItem("EP_ADMIN_isFixed") == 'true' ? true : false,isOpen: true,isFixed: true,querylogoimg:"",},mutations: {setIsOpen(state, val) {state.isOpen = vallocalStorage.setItem("EP_ADMIN_isOpen", val)},setIsFixed(state, val) {state.isFixed = vallocalStorage.setItem("EP_ADMIN_isFixed", val)},logocahnge(state , value){// console.log(value);state.querylogoimg = value},},actions: {},modules: {}
})

3. vuex 的页面使用

<script>
import { mapMutations, mapState } from "vuex"
import Api_login from "@/assets/api/login"
export default {data() {return {username: '',// querylogoimg:"",Defaultlogo:require("../../assets/img/login/logo-headportrait.png"),}},computed: {...mapState([ 'isOpen',  'isFixed'])},created() {},mounted() {this.getUserInfoFun(); // 获取登录者用户信息},methods: {...mapMutations(['setIsOpen', 'setIsFixed' , 'logocahnge' ]),getUserInfoFun(){// this.querylogoimg = let _this = this;// 获取用户信息Api_login.getUserInfo().then(res => {if (res.success) {this.username = res.result.name;// 存储头像图片信息this.$store.commit('logocahnge' ,  res.result.avator)let jsonData = JSON.stringify(res.result);_this.$store.commit("setUserInfo", jsonData);utils.init(this);}});},}
}
</script>也可在 DOM 结构上使用：
<img :src="$store.state.querylogoimg == null ? Defaultlogo : $store.state.querylogoimg" alt="">

最后说下 vuex 中的 modules

1. 取文件夹中其中一个做代表

2.文件夹结构使用方式

vuebus使用描述推荐：https://blog.csdn.net/qq_41630382/article/details/84100016?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162813297116780264087097%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=162813297116780264087097&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-1-84100016.pc_search_result_control_group&utm_term=vue+bus%E4%BD%BF%E7%94%A8&spm=1018.2226.3001.4187

状态管理工具vuex的基本使用(vuebus的理解)相关推荐

在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
mount 返回状态_状态管理模式 — Vuex如何使用？
Extract 试想当我们在开发一个Vue应用程序时,如果在一个项目中频繁的使用组件传参的方式来同步data中的值,一旦项目结构变得复杂,管理和维护这些数据将变得十分繁琐,为此,Vue为这些被多个组件 ...
状态管理 - 全局状态管理工具
文章目录一.单向数据流 1. 理念示意图 2. 简述二.什么是全局状态管理模式三.重点概念 3.1. 什么是全局状态管理模式? 3.2.全局状态管理工具? 3.3. 什么是 vuex 四.在项目 ...
Vue新一代状态管理工具—Pinia—都2023年了，快学起来吧！
Pinia 基本介绍 Pinia 是 Vue.js 的轻量级状态管理库官方网站:https://pinia.vuejs.org/ 中文文档: https://pinia.web3doc.top/in ...
vue3状态管理工具 pinia的使用
vue3状态管理工具 pinia的使用 pinia 是一个轻量级的状态管理库,属于 vue3 生态圈新的成员之一,也可以把它看做 vuex5,同时支持 vue2 和 vue3,模块化的设计让它的结构十 ...
vue项目的状态管理器(Vuex)
一.什么是vuex Vuex是vue项目的状态管理器(状态管理工具).vue项目的状态是通过vue实例(组件)绑定的变量来体现.所以也可以说vuex是用来管理vue项目中的各种变量(vue项目中的组件 ...
Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么
Pinia从了解到实际运用--彻底搞懂什么是Pinia 知识回调(不懂就看这儿!) 场景复现什么是pinia pinia相比vuex的优势为什么要使用pinia? 基本示例知识回调(不懂就看这儿 ...
状态管理模式 - vuex 的使用介绍
前言大家好,不知道大家在用 vue 进行开发过程中有没有遇到这样一种场景,就是有些时候一些数据是一种通用的共享数据(比如登录信息),那么这类数据在各个组件模块中可能都会用到,如果每个组件中都去后台重 ...
[译] ⚛ React 状态管理工具博物馆
原文地址:⚛ The React State Museum: ⚡️View the hottest state management libs for React 原文作者:Gant Laborde ...

状态管理工具vuex的基本使用(vuebus的理解)

vuex的展示图

1. vuex 的基本结构

1.1 vuex 数据持久化设置

2. vuex 的基本使用

3. vuex 的页面使用

最后说下 vuex 中的 modules

1. 取文件夹中其中一个做代表

2.文件夹结构使用方式

状态管理工具vuex的基本使用(vuebus的理解)相关推荐

最新文章

热门文章

状态管理工具vuex的基本使用(vuebus的理解)

vuex的展示图

1. vuex 的基本结构

1.1 vuex 数据持久化设置

2. vuex 的基本使用

3. vuex 的页面使用

最后说下 vuex 中 的 modules

1. 取文件夹中其中一个做代表

2.文件夹结构使用方式

状态管理工具vuex的基本使用(vuebus的理解)相关推荐

最新文章

热门文章

最后说下 vuex 中的 modules