当前位置: 首页 > news >正文

Vue2 之 Vuex - 状态管理

目录

一、目录结构

二、store仓库

1. index.js文件

2. mutations.js文件代码

3. actions.js文件

4. getters.js文件

5. 在modules文件夹中,放置页面的vuex模块

三、组件中使用 Vuex

1. 引入

2. state

01 - 直接使用

02 - mapState

        传入数组

        传入对象

3. getters

01 - 直接使用

02 - mapGetters

4. mutations

01 - 直接使用

02 - mapMutations

5. actions

01 - 直接使用

02 - mapActions

6. module

Vue3 之 Vuex - 状态管理_玄鱼殇的博客-CSDN博客


一、目录结构

二、store仓库

1. index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import {mutations} from './mutations'
import actions from './actions'
import getters from './getters'
import Session from '../../../sessionStorage.js'

import eat from './modules/eat' //吃模块
import drink from './modules/drink' //喝模块
import play from './modules/play' //玩模块
import happy from './modules/happy' //乐模块


export default new Vuex.Store({
  state: {
    baseHttpUrl: '',//项目的请求地址
    baseHttpFileUrl: '',//项目中下载文件的请求地址
    apiBaseParam: {//请求的基本格式
      "version": "",
      "userId": '',
      "token": Session.getItem('abc') ? Session.getItem('abc').token : "",
    }, 
  },
  modules: {
    eat,
    drink,
    play,
    happy,
  },
  actions,
  mutations,
  getters
})

2. mutations.js文件代码

export const mutations = {
  // 设置用户userId
  PRO_SET_ID(state,value){
    state.id = value;
  },
  // 设置类型
  PRO_SET_TYPE(state,value){
    state.Type = value;
  },
   // 设置faceLogo
   PRO_SET_FACELOGO(state,value){
    state.faceLogo = value;
  },
}

3. actions.js文件

//请求的方法
import {
  getEatMessage,
  getPlayMessage,
} from '_ser/http.js'

export default {
  //获取全部的吃信息,解构出来
  getEatMessage({
    commit,
    state
  },data) {
    let param = {
      page: 1,
      pageSize: 10000,
    }
    return new Promise((resolve, reject) => {
      getEatMessage(param).then(res => {
        if (res.code == 200) {
          //调用mutations中的方法,存储数据
          commit('EAT_LIST', res.data)
        }
        resolve(res)
      }).catch(err => {
        reject(err)
      })
    })
  },
  ...,
  ...,
  ...
}

4. getters.js文件

export const getters = {
    baseHttpUrl(state){
        return state.baseHttpUrl
    },
    ......
}

5. 在modules文件夹中,放置页面的vuex模块

/* 吃模块 */
const eat = {
    state: {
        time: 'oneDay', //一天
    },
    mutations: {
        //宿管模块人员信息的时间
        TIME(state, value) {
            state.time = value
        }
    },
    getters: {
        getTime(state) {
            return state.time
        }
    },
    actions: {},
}
export default eat

三、组件中使用 Vuex

1. 引入

import { mapState, mapMutations, mapGetters, mapActions, Store } from "vuex"

2. state

01 - 直接使用

<template>
  <!-- 1. 模版中使用 -->
  {{ $store.state.baseHttpUrl }}
</template>

<script>
export default {
  // 2. 代码中使用
  mounted() {
    console.log(this.$store.state.baseHttpUrl);
  }
};
</script>

02 - mapState

        传入数组

computed: {
  // 直接映射数据过来,但是可能会和组件当前定义的数据名称产生冲突
  ...mapState(["name", "level", "avatarURL"])
}

        传入对象

computed: {
  // 传入对象
  ...mapState({
    // 可以取别名
    sName: state => state.name,
    sLevel: state => state.level
  })
}

3. getters

01 - 直接使用

<template>
  <!-- 1. 模版中使用 -->
  {{ $store.getters.baseHttpUrl }}
</template>

<script>
export default {
  // 2. 代码中使用
  mounted() {
    console.log(this.$store.getters.baseHttpUrl);
  }
};
</script>

02 - mapGetters

export default {
  computed: {
    ...mapGetters(['baseHttpUrl']),
    
    // 取别名
    ...mapGetters({
        bbbbaseUrl:'baseHttpUrl'
    }),
  }
};

4. mutations

01 - 直接使用

export default {
  methods: {
    btnClick() {
      // 调用mutation中的PRO_SET_ID方法
      this.$store.commit('PRO_SET_ID', 666);
    }
  }
}

02 - mapMutations

export default {
  methods: {
    ...mapMutations(["PRO_SET_ID"]),
     
    ...mapMutations({
        // 取别名
        aaaaaa:"PRO_SET_ID"
    }),
    btnClick() {
      // 直接调用
      this.PRO_SET_ID(666);
    }
  }
}

5. actions

01 - 直接使用

export default {
  methods: {
    btnClick() {
      // 调用actions中的getEatMessage,并传入数据
      this.$store.dispatch('getEatMessage', 666);
    }
  }
};

02 - mapActions

export default {
  methods: {
    ...mapActions(['getEatMessage']),

    ...mapActions({
        // 取别名
        aaaa:'getEatMessage'
    }),
    btnClick() {
      // 直接调用
      this.getEatMessage(666);
    }
  }
};

6. module

懒得写啦,这里一样哒,哦豁~

Vue3 之 Vuex - 状态管理_玄鱼殇的博客-CSDN博客

相关文章:

  • 一篇带你走进Vue+阿里云的uni-app开发(HBuilder X开发版)
  • 高蛋白饮食≠健康 多组学分析揭示植物高蛋白对血糖和肝脏脂质代谢的影响
  • 【HTML+CSS+JS表白网站搭建】520七夕到了,快搭个漂亮的表白网站送给TA吧
  • 【云原生】Elasticsearch + kibana on k8s 讲解与实战操作
  • 10月计算机类SCI合集来了,多领域极速审稿,想要快速录用吗?
  • (9)目标检测_SSD的原理
  • Java反射小练之手写BeanUtils的copyProperties(Upgrade)
  • 千粉缔造760w播放!B站“新人”UP主在B站怎么加速上位?
  • 对于B+树,为什么说一般查找行记录,最多只需1~3次磁盘IO
  • 如何在充满不确定性的当下探索未来?
  • FPGA—从加法运算理解流水线的作用
  • i.MX 6ULL 驱动开发 十五:按键中断(input子系统)
  • Django用户认证系统
  • 论坛介绍 | COSCon'22 开源硬件(H)
  • 【Vulnhub靶场】——HARRYPOTTER第三部: FAWKES
  • 【个人向】《HTTP图解》阅后小结
  • 【划重点】MySQL技术内幕:InnoDB存储引擎
  • 0x05 Python数据分析,Anaconda八斩刀
  • exports和module.exports
  • Java应用性能调优
  • Kibana配置logstash,报表一体化
  • Python_OOP
  • React-redux的原理以及使用
  • TiDB 源码阅读系列文章(十)Chunk 和执行框架简介
  • 对超线程几个不同角度的解释
  • 关于字符编码你应该知道的事情
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?
  • 那些被忽略的 JavaScript 数组方法细节
  • 前端学习笔记之观察者模式
  • 驱动程序原理
  • 设计模式 开闭原则
  • 使用 5W1H 写出高可读的 Git Commit Message
  • 使用API自动生成工具优化前端工作流
  • 使用common-codec进行md5加密
  • 用Python写一份独特的元宵节祝福
  • 直播平台建设千万不要忘记流媒体服务器的存在 ...
  • ​HTTP与HTTPS:网络通信的安全卫士
  • #HarmonyOS:Web组件的使用
  • #常见电池型号介绍 常见电池尺寸是多少【详解】
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • (1) caustics\
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (解决办法)ASP.NET导出Excel,打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
  • (图)IntelliTrace Tools 跟踪云端程序
  • (一)VirtualBox安装增强功能
  • .NET “底层”异步编程模式——异步编程模型(Asynchronous Programming Model,APM)...
  • .NET 使用 XPath 来读写 XML 文件
  • .Net6使用WebSocket与前端进行通信
  • @manytomany 保存后数据被删除_[Windows] 数据恢复软件RStudio v8.14.179675 便携特别版...
  • @modelattribute注解用postman测试怎么传参_接口测试之问题挖掘
  • [2018/11/18] Java数据结构(2) 简单排序 冒泡排序 选择排序 插入排序
  • [AMQP Connection 127.0.0.1:5672] An unexpected connection driver error occured
  • [android] 切换界面的通用处理
  • [BZOJ] 1001: [BeiJing2006]狼抓兔子
  • [C++提高编程](三):STL初识