Vuex的各个模块封装
一、各个模块的作用:
state 用来数据共享数据存储
mutation 用来注册改变数据状态(同步)
getters 用来对共享数据进行过滤并计数操作
action 解决异步改变共享数据(异步)
二、 创建文件:
actions.js
getters.js
index.js
mutations.js
mutation-types.js
state.js
三、编辑文件
这里只是拿出自己的项目来做一个例子,只是介绍封装的方法。
index.js
import Vue from ‘vue’
import Vuex from ‘vuex’
import * as actions from ‘./actions’
import * as getters from ‘./getters’
import state from ‘./state’
import mutations from ‘./mutations’
import createLogger from ‘vuex/dist/logger’ // vuex调试工具
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== ‘prodycution’ // 开发环境下开启严格模式
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})
state.js
import {playMode} from ‘common/js/config’
import {loadSearch} from ‘common/js/cache’
const state = {
singer: {},
playing: false,
fullScreen: false,
playlist: [],
sequenceList: [],
mode: playMode.sequence,
currentIndex: -1,
disc: {},
topList: {},
searchHistory: loadSearch()
}
export default state
mutations.js
import * as types from ‘./mutation-types’
const mutations = {
[types.SET_SINGER](state, singer) {
state.singer = singer
},
[types.SET_PLAYING_STATE](state, flag) {
state.playing = flag
},
[types.SET_FULL_SCREEN](state, flag) {
state.fullScreen = flag
},
[types.SET_PLAYLIST](state, list) {
state.playlist = list
},
[types.SET_SEQUENCE_LIST](state, list) {
state.sequenceList = list
},
[types.SET_PLAY_MODE](state, mode) {
state.mode = mode
},
[types.SET_CURRENT_INDEX](state, index) {
state.currentIndex = index
},
[types.SET_DISC](state, disc) {
state.disc = disc
},
[types.SET_TOP_LIST](state, topList) {
state.topList = topList
},
[types.SET_SEARCH_HISTORY](state, history) {
state.searchHistory = history
}
}
export default mutations
mutation-types.js
export const SET_SINGER = ‘SET_SINGER’
export const SET_PLAYING_STATE = ‘SET_PLAYING_STATE’
export const SET_FULL_SCREEN = ‘SET_FULL_SCREEN’
export const SET_PLAYLIST = ‘SET_PLAYLIST’
export const SET_SEQUENCE_LIST = ‘SET_SEQUENCE_LIST’
export const SET_PLAY_MODE = ‘SET_PLAY_MODE’
export const SET_CURRENT_INDEX = ‘SET_CURRENT_INDEX’
export const SET_DISC = ‘SET_DISC’
export const SET_TOP_LIST = ‘SET_TOP_LIST’
export const SET_SEARCH_HISTORY = ‘SET_SEARCH_HISTORY’
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119251261
Vuex的各个模块封装的更多相关文章
- Vue + Element UI 实现权限管理系统(工具模块封装)
封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...
- Vue + Element UI 实现权限管理系统 前端篇(三):工具模块封装
封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...
- python解析xml模块封装代码
在python中解析xml文件的模块用法,以及对模块封装的方法.原文转自:http://www.jbxue.com/article/16586.html 有如下的xml文件:<?xml vers ...
- 简易的highcharts公共绘图模块封装--基于.net mvc
运行效果: 之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,Demo丰富,配置使用简单.具体内容请登录中文官网:http://www.hcharts.cn/ 项目详细: 项目环境 ...
- Java 9 揭秘(9. 打破模块封装)
Tips 做一个终身学习的人. 在此章节中,主要介绍以下内容: 什么是打破模块的封装 如何使用命令行选项将依赖项(添加需要)添加到模块 如何使用--add-exports命令行选项导出模块的未导出包, ...
- 如何将自己写的verilog模块封装成IP核
如何将自己写的verilog模块封装成IP核 (2014-11-21 14:53:29) 转载▼ 标签: 财经 分类: 我的东东 =======================第一篇========= ...
- python + selenium 模块封装及参数化
模块封装 示例代码: baidu.py from time import sleep from selenium import webdriver driver = webdriver.Chrome( ...
- React-Native开发之原生模块封装(Android)升级版
本文主题:如何实现原生代码的复用,即如何将原生模块封装. (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/52862 ...
- Node.js模块封装及使用
Node.js中也有一些功能的封装,类似C#的类库,封装成模块这样方便使用,安装之后用require()就能引入调用. 一.Node.js模块封装 1.创建一个名为censorify的文件夹 2.在c ...
随机推荐
- asp.net core启动源码以及监听,到处理请求响应的过程
摘要 asp.net core发布至今已经将近6年了,很多人对于这一块还是有些陌生,或者说没接触过:接触过的,对于asp.net core整个启动过程,监听过程,以及请求过程,响应过程也是一知半解,可 ...
- JetBrains Rider C# 学习②
前言 C#从入门到精通 链接:https://pan.baidu.com/s/1UveJI_f-c5Dul3GLIICRHg 提取码:1314 C#入门课程 刘铁猛 链接:https://pan.ba ...
- fs本地文件系统
node 中有一个内置模块,fs全称flie system 文件系统,可以对本地文件执行增删改查操作(以下为异步相关API) 先引入内置模块 var fs=require('fs') 1,增: w ...
- javaScript 内存管理机制
大家好,今天分享的主题为 JavaScript 内存管理机制,本次分享将从以下三部分进行讲述: js 内存管理与 js 垃圾 常见的 GC 算法 V8 引擎的垃圾回收 js 内存管理与 js 垃圾 关 ...
- HCIE笔记-第七节-ICMP+ARP
ICMP重定向 作用:解决网络中的次优路径 触发:当某一个设备收到一个数据,进行转发时发现还要从该接口进行转发,于是触发ICMP重定向. 报文:Type=5,Code=0 ARP -- 地址解析协议 ...
- Vue_transition动画
1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml ...
- 【mq】从零开始实现 mq-01-生产者、消费者启动
MQ 是什么? MQ(Message Queue)消息队列,是基础数据结构中"先进先出"的一种数据结构. 指把要传输的数据(消息)放在队列中,用队列机制来实现消息传递--生产者产生 ...
- Visual Studio 修改NuGet 包缓存路径
Visual Studio 下载的NuGet包默认会缓存到 C:\Users{Windows用户名}.nuget\packages 下,时间一长就会导致 C盘空间严重不足. 那么怎样去设置,让包缓存文 ...
- 4.27-Postman和JMeter总结及实战描述
一.数据格式 常用的请求方法有8种,但是最常用的有4-5种 1.GET 获取资源 2.POST 添加资源(对服务端已存在的资源也可以做修改和删除操作) 3.PUT 修改资源 4 .DELETE删除资源 ...
- 做SaaS的程序员们,是时候关注企业架构了
SaaS赛道是一个超大赛道,足够容纳上万家服务商,不太可能有哪个服务商能满足所有场景,大部分SaaS服务商在某个垂直领域,提供差异化的产品和服务.SaaS产品大部分都是面向B端客户,少部分面向C端客户 ...