一、各个模块的作用:

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的各个模块封装的更多相关文章

  1. Vue + Element UI 实现权限管理系统(工具模块封装)

    封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...

  2. Vue + Element UI 实现权限管理系统 前端篇(三):工具模块封装

    封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情,但是axios没有进行封装复用,项目越来越大,会引起越来越多的代码冗余,让代码变得越来越难维护.所以我们在这里先对 axi ...

  3. python解析xml模块封装代码

    在python中解析xml文件的模块用法,以及对模块封装的方法.原文转自:http://www.jbxue.com/article/16586.html 有如下的xml文件:<?xml vers ...

  4. 简易的highcharts公共绘图模块封装--基于.net mvc

    运行效果: 之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,Demo丰富,配置使用简单.具体内容请登录中文官网:http://www.hcharts.cn/ 项目详细: 项目环境 ...

  5. Java 9 揭秘(9. 打破模块封装)

    Tips 做一个终身学习的人. 在此章节中,主要介绍以下内容: 什么是打破模块的封装 如何使用命令行选项将依赖项(添加需要)添加到模块 如何使用--add-exports命令行选项导出模块的未导出包, ...

  6. 如何将自己写的verilog模块封装成IP核

    如何将自己写的verilog模块封装成IP核 (2014-11-21 14:53:29) 转载▼ 标签: 财经 分类: 我的东东 =======================第一篇========= ...

  7. python + selenium 模块封装及参数化

    模块封装 示例代码: baidu.py from time import sleep from selenium import webdriver driver = webdriver.Chrome( ...

  8. React-Native开发之原生模块封装(Android)升级版

     本文主题:如何实现原生代码的复用,即如何将原生模块封装. (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/52862 ...

  9. Node.js模块封装及使用

    Node.js中也有一些功能的封装,类似C#的类库,封装成模块这样方便使用,安装之后用require()就能引入调用. 一.Node.js模块封装 1.创建一个名为censorify的文件夹 2.在c ...

随机推荐

  1. linux三剑客试题汇总

    1.找出/proc/meminfo文件中以s开头的行,至少用三种方式忽略大小写 [root@localhost ~]# grep -E '^[sS]' /proc/meminfo [root@loca ...

  2. linux find命令 -mtime参数 根据修改时间查找文件

    命令:find 搜索路径 -mtime n 主要说明n的含义: 例: n=5 "5"指的是前 5~6 天那一天修改的文件 n=-5 "-5"指的是 5 天内修改 ...

  3. 1s 创建100G文件,最快的方法是?

    在我们日常工作中,为了验证开发的功能,比如:文件上传功能或者算法的处理效率等,经常需要一些大文件进行测试,有时在四处找了一顿之后,发现竟然没有一个合适的,虽然 Linux 中也有一些命令比如:vim. ...

  4. vue3跳转路由3步曲

    import { useRouter } from 'vue-router';   // 1. 引入路由export default {   setup() {      const $router ...

  5. 如何调试手机上的网页以及基于Cordova/Phonegap的Hybrid应用

    开发手机页面以及Hybird应用时,调试曾经是个老大难问题,不时需要用写log等方式曲线救国. 实际上,Chrome和Android(需要4.4+版本)已经提供了不亚于电脑版本的调试功能,只是看样子还 ...

  6. 论文解读(BGRL)《Bootstrapped Representation Learning on Graphs》

    论文信息 论文标题:Bootstrapped Representation Learning on Graphs论文作者:Shantanu Thakoor, Corentin Tallec, Moha ...

  7. 支持中文!秒建 wiki 知识库的开源项目,构建私人知识网络

    不知道有没有人和我一样,觉得自建的东西是互联网上的"自留地".私人空间,有一种自己的一亩三分地随心所欲的痛快. 比如自建的博客想写什么随笔就写什么,不用取悦读者可以自娱自乐:再比如 ...

  8. python基础练习题(题目 作用域、类的方法与变量)

    day29 --------------------------------------------------------------- 实例043:作用域.类的方法与变量 题目 模仿静态变量(st ...

  9. Python学习-Day1(Typora软件与计算机)

    学习总括 Typora软件介绍(markdown语法) 相关拓展知识 文件的后缀名是什么? 什么是语言? 什么是编程语言? 什么是编程?(程序员写代码的本质) 计算机的五大组成部分 计算机的本质 计算 ...

  10. IOC简介 -Bean的作用域 创建对象

    创建对象 创建对象时默认使用无参构造器,无论对象在容器中后续是否被使用, 都会先实例化对象 . (婚介网站,里面人都是先存在的,到时直接牵手就行) 也可以使用以下方法,使用有参构造器来创建对象 根据参 ...