state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state

Vue Components：state里面的数据可以方便的映射到组件上 然后渲染组件

Actions：当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互  然后它可以取commit一个mutations

注意：我们也可以在组件中直接commit一个mutations

Mutations：是唯一可以修改State的途径  其他任何方式修改都是不被允许的 Vuex这样做的目的是为了让state的修改是可以预测的  当state被修改之后  又可以映射到组件上  形成一个闭环

使用vuex之前我们通常会在src文件夹下新建一个store文件夹

新建state.js   mutation-type.js   mutations.js   getter.js   index.js   action.js

在state.js中 我们设置组件中的数据

在mutations-types.js中 我们导出修改数据对应的方法名

在mutations.js中  我们要写出详细的修改数据的方法

根据上述方法

在修改数据并且提交数据之后   我们可以在别的组件中获取该数据  从而实现不同组件间的数据共享   那么如何来获取到数据呢？？

获取数据  获取的是getter.js中的数据

z最后最重要的是在store文件夹下的index.js中初始化vuex

用Vue来实现音乐播放器（二十）：Vuex初始化及歌手数据的配置的更多相关文章

  1. 用Vue来实现音乐播放器（十四）：歌手数据接口抓取

    第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/j ...

  2. 用Vue来实现音乐播放器（十六）：滚动列表的实现

    滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件     <template> < ...

  3. 用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮

    问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight ...

  4. 用Vue来实现音乐播放器（十五）：处理得到的歌手数据

    之前得到的歌手数据是用forEach遍历添加的  没有顺序性  我们希望得到的数据是title:"热门"的数据在最上面  title为字母的数据按字母从低到高顺序排列 var ho ...

  5. vue小练习--音乐播放器

    1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  6. 用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  7. Vue实战：音乐播放器（一） 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  8. 用Vue来实现音乐播放器（二十三）：音乐列表

    当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候   我们的图片会放大 当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列 ...

  9. 用Vue来实现音乐播放器（二十一）：歌手详情数据抓取

    第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三 ...

随机推荐

  1. c# WPF SVG 文件的引用（SharpVectors）

    原文:c# WPF SVG 文件的引用(SharpVectors) 阿里巴巴矢量图标库提供了大量的 SVG 图标:https://www.iconfont.cn/ 但是 WPF 本身不支持 SVG 格 ...

  2. vue项目1-pizza点餐系统5-全局守卫

    一.导航守卫描述 当问我们点击主页.菜单等非登陆和注册按钮都会提示先登陆然后跳转到登陆界面. 1.在main.js中引入全局守卫 //全局守卫 //to是要进入那个路由,from是从那个路由出来,ne ...

  3. es6 async和await

    es7 async和await ,作为genertor函数语法糖,在使用上比generator函数方便的,Generator 函数就是一个封装的异步任务,或者说是异步任务的容器.异步操作需要暂停的地方 ...

  4. setTimeout、Promise、Async/Await 的执行顺序

    问题描述:以下这段代码的执行结果 async function async1() { console.log('async1 start'); await async2(); console.log( ...

  5. FPGA 物理时序不合理的体现（体现方式：数字钟的行扫描和列扫描）

    本人在这只讨论建模好的模块来比较解释现象,如有不周到请大家指正. 软件功能仿真和在硬件上的区别:可以从这个数码管的行扫描和列扫描实例来体会一下,物理时序的影响和改进方法. 数码管的行扫描.列扫描要求同 ...

  6. qt04 中文显示问题

    sockettools识别GB2312,接收qt server 数据时 QByteArray ba = str.toLocal8Bit(); char *ss = ba.data(); obj-> ...

  7. 【学习】 015 Linux相关

    Linux入门 什么是Linux Linux简介 Linux是一种自由和开放源码的操作系统,存在着许多不同的Linux版本,但它们都使用了Linux内核.Linux可安装在各种计算机硬件设备中,比如手 ...

  8. u-boot-2019.07 移植步骤

    doc/README.kconfig Tips to add/remove boards------------------------- When adding a new board, the f ...

  9. python碎片化 - 集合set

    集合set:无序,不重复的数据类型 list1={1,2,3,4,5} list2={6,5,4,7,8,9,} list3={1,2,3} s = set([3,5,9,10]) #交集 print ...

  10. jzoj6404. 【NOIP2019模拟11.04】B

    题目描述 Description Input 从文件b.in中读入数据. 第丬行三个正整数 n, m, K. 接下来 n 行每行 m 个正整数, 表示矩阵A. Output 输出到文件b.out中. ...