魏彬的仓库
0%

Posted on Edited on In

安装

安装一种服务器的 一种客户端的

npm install socket.io --save
npm install socket.io-client --save

EXPRESS服务端

用server.listen就将express和 socket.io结合起来了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const app = express();
const server = require('http').Server(app)
const io = require('socket.io')(server)



// on  是 监听 参数socket是当前这次链接的请求 Io是全局请求
io.on('connection',function(socket){
    console.log('user login')
    socket.on('sendmsg',function(data){
        console.log(data)
        io.emit('recvmsg',data)  //再次把请求放到全局中
    })
})


//
server.listen(9093,function(){
    console.log('node server start at port 9093')
})

页面处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import io from 'socket.io-client'
   //因为后台在9093 前台在3000 跨域 需要手动指定下,
   如果不需要跨域直接 socket=io() 就行？
const socket = io('ws://localhost:9093')

//发送一个请求
socket.emit('sendmsg',{text:this.state.text})


componentDidMount(){       
        //监听全局的
        socket.on('recvmsg',function(data){
            console.log(data)
        })

    }

html

1

Posted on Edited on In

分为两种封装形式 对象封装 和 函数封装

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
    <head>
        <style>
            *{margin:0; padding:0}
            div ul{
                display: flex;
            }
            div ul li{
                list-style-type:none;
                width: 50px; height: 50px; background-color:yellow; margin:0 10px; transition: all .3s;
            }
            div ul li.active{
                background: red
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
      </body>
</html>
Read more »

Posted on Edited on In

基本介绍

Promise类似于 XMLHttpRequest，从构造函数 Promise 来创建一个新建新promise对象作为接口。

要想创建一个promise对象、可以使用new来调用Promise的构造器来进行实例化。

1
2
3
4
5
var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

对通过new生成的promise对象为了设置其值在 resolve(成功) / reject(失败)时调用的回调函数 可以使用promise.then() 实例方法。

1
2
promise.then(onFulfilled, onRejected)

resolve(成功)时
onFulfilled 会被调用

reject(失败)时
onRejected 会被调用

Promise的状态

用new Promise 实例化的promise对象有以下三个状态。

“has-resolution” - Fulfilled
resolve(成功)时。此时会调用 onFulfilled

“has-rejection” - Rejected
reject(失败)时。此时会调用 onRejected

“unresolved” - Pending
既不是resolve也不是reject的状态。也就是promise对象刚被创建后的初始化状态等

创建promise对象

1.new Promise(fn) 返回一个promise对象

2.在fn 中指定异步等处理

处理结果正常的话，调用resolve(处理结果值)

处理结果错误的话，调用reject(Error对象)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function getURL(URL) {
    return new Promise(function (resolve, reject) {
        var req = new XMLHttpRequest();
        req.open('GET', URL, true);
        req.onload = function () {
            if (req.status === 200) {
                resolve(req.responseText);
            } else {
                reject(new Error(req.statusText));
            }
        };
        req.onerror = function () {
            reject(new Error(req.statusText));
        };
        req.send();
    });
}
// 运行示例
var URL = "http://httpbin.org/get";
getURL(URL).then(function onFulfilled(value){
    console.log(value);
}).catch(function onRejected(error){
    console.error(error);
});

getURL 只有在通过XHR取得结果状态为200时才会调用 resolve - 也就是只有数据取得成功时，而其他情况（取得失败）时则会调用 reject 方法。

getURL函数 中的 resolve(req.responseText); 会将promise对象变为resolve（Fulfilled）状态， 同时使用其值调用 onFulfilled 函数。

在getURL 的处理中发生任何异常，或者被明确reject的情况下， 该异常原因（Error对象）会作为 .catch 方法的参数被调用。

其实 .catch只是 promise.then(undefined, onRejected) 的别名而已， 如下代码也可以完成同样的功能。

1
getURL(URL).then(onFulfilled, onRejected);

Promise.resolve

静态方法Promise.resolve(value) 可以认为是 new Promise() 方法的快捷方式。

比如 Promise.resolve(42); 可以认为是以下代码的语法糖。

1
2
3
new Promise(function(resolve){
    resolve(42);
});

在这段代码中的 resolve(42); 会让这个promise对象立即进入确定（即resolved）状态，并将 42 传递给后面then里所指定的 onFulfilled 函数

方法 Promise.resolve(value); 的返回值也是一个promise对象，所以我们可以像下面那样接着对其返回值进行 .then 调用

1
2
3
4
Promise.resolve(42).then(function(value){
    console.log(value);
});

Promise.reject

Promise.reject(error)是和 Promise.resolve(value) 类似的静态方法，是 new Promise() 方法的快捷方式。
比如 Promise.reject(new Error(“出错了”)) 就是下面代码的语法糖形式。

1
2
3
new Promise(function(resolve,reject){
    reject(new Error("出错了"));
});

这段代码的功能是调用该promise对象通过then指定的 onRejected 函数，并将错误（Error）对象传递给这个 onRejected 函数。

1
2
3
Promise.reject(new Error("BOOM!")).catch(function(error){
    console.error(error);
});

它和Promise.resolve(value) 的不同之处在于promise内调用的函数是reject而不是resolve，这在编写测试代码或者进行debug时，说不定会用得上。

promise chain 中如何传递参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function taskA() {
    console.log("Task A");
    throw new Error("throw Error @ Task A")
}
function taskB() {
    console.log("Task B");// 不会被调用
}
function onRejected(error) {
    console.log(error);// => "throw Error @ Task A"
}
function finalTask() {
    console.log("Final Task");
}

var promise = Promise.resolve();
promise
    .then(taskA)
    .then(taskB)
    .catch(onRejected)
    .then(finalTask);

执行这段代码我们会发现 Task B 是不会被调用的。
前面例子中的Task都是相互独立的，只是被简单调用而已。
这时候如果 Task A 想给 Task B 传递一个参数该怎么办呢？
答案非常简单，那就是在 Task A 中 return 的返回值，会在 Task B 执行时传给它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function doubleUp(value) {
    return value * 2;
}
function increment(value) {
    return value + 1;
}
function output(value) {
    console.log(value);// => (1 + 1) * 2
}

var promise = Promise.resolve(1);
promise
    .then(increment) //2
    .then(doubleUp) //4
    .then(output) //4
    .catch(function(error){
        // promise chain中出现异常的时候会被调用
        console.error(error);
    });

这段代码的入口函数是 Promise.resolve(1); ，整体的promise chain执行流程如下所示。
Promise.resolve(1); 传递 1 给 increment 函数
函数 increment 对接收的参数进行 +1 操作并返回（通过return）
这时参数变为2，并再次传给 doubleUp 函数
最后在函数 output 中打印结果

Promise#catch

实际上 Promise#catch 只是 promise.then(undefined, onRejected); 方法的一个别名而已。 也就是说，这个方法用来注册当promise对象状态变为Rejected时的回调函数。

原文链接

Posted on Edited on In

原文摘自陈胜博客

问题表现

页面 echarts 图表 在做一些数据交互的时候会涉及到一些数据的更新。如果只是简单的新数据传递给echarts图表，许多时候我们会发现 旧有的时候依然残留在页面之上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
$(function() {
    var echartOpt = {
        fz: '15',
        color: '#fff'
    };

    var demo = echarts.init(document.getElementById('trade-history'));

    function initDemo(data, obj) {
        var demoOption = {
            tooltip: {},
            legend: {
                data: [],
            },
            calculable: true,
            xAxis: {
                data: ['2007', "2008", "2009", "2010", "2011"],
            },
            yAxis: [{
                type: 'value',
                name: '贸易量（万吨）',
                min: 0,
            }],
            color: ["#3fa7dc", "#ffea38", "#f9852d", "#F10F0F", "#14EE10"],
        };

        var seriesStyle = [{
            barMaxWidth: 10,
            itemStyle: {
                normal: {
                    // borderColor: '#3fa7dc',
                    color: '#3fa7dc'
                }
            },
        }, {
            barMaxWidth: 10,
            itemStyle: {
                normal: {
                    // borderColor: '#ffea38',
                    color: '#ffea38'

                }
            },
        }]

        // 新的图例数据
        var legend = data.map(function (item, index) {
            return item.name
        })
        var newOption = {
            legend: {
                data: legend
            },
            series: data    // 传入的数据
        }

        // 将数据样式 加载到我们的 新数据上面
        newOption.series.forEach(function(item, index) {
            $.extend(true, item, seriesStyle[index])        
        });

        // 新旧数据合并
        $.extend(true, demoOption, newOption)

        demo.setOption(demoOption, true);
    }

    // 假数据 1
    var dataOne = [{
            name: 'A',
            type: 'bar',
            data: [200, 300, 100, 330, 350],
        }]
    // 假数据 2
    var dataTwo = [{
        name: 'A',
        type: 'bar',
        data: [100, 300, 100, 330, 350],
    }, {
        name: 'B',
        type: 'bar',
        data: [200, 100, 400, 300, 600],
    }]

    // 页面初始化
    initDemo(dataOne)

    var toggleBtn = document.querySelector('.toggle')

    // 无用的循环数据使用
    var n = 0
    toggleBtn.addEventListener('click', function () {
        n = (n + 1) % 2
        var data = n === 0 ? dataOne : dataTwo
        initDemo(data)
    })


})

Posted on Edited on In

代码

  div {
            width: 100px;
            height: 2px;
            margin-top: 10px;

        }
        #test {

            background-image: linear-gradient(90deg,red 0, red 25%, transparent 25%,transparent 50%, red 50%,red 75%,transparent 75%,transparent 100%);  

            background-size: 8px 2px;

        }

从0-25% 红色 25%-25%红色和透明色混合 就是突变为透明色 25%-50%透明色混合 还是透明色
50% - 50% 突变为红色 50%-75%红色….

Posted on Edited on In

结构

1
2
3
4
5
6
7
8
9
10
11
12
13
|-- 项目名
    |-- src 开发环境
        |-- assets  资产目录
            |-- css   样式基础库
                |-- index.sass  webpack main.js 中通过 import '../index.sass' 引入
                |-- reset.scss          重置样式库
                |-- variable.sass       变量文件
                |-- iconfont.css        字体文件
                |-- mixin.sass          宏文件
                |-- base.scss           定义项目 body 字体字号 等
                |-- frame.scss          框架文件
                |-- public.scss         共用样式
            |-- others  其它

SCSS 与 SASS 说明

1. 区别

SASS是Ruby语言写的，其语法与stylus语法大同小异，其语法以缩进定义层级，于前端并不友好。SCSS 借鉴其它预编译语言less对 SASS 做了扩充，使其语法支持大括弧与分号，两者语法不可以混用，但文件间可以相互引用。即 a.scss 可以 @import 'b.sass 同理 b.sass 亦可 @import a.scss，实际引入过程中可直接忽略掉文件后缀。如 @import a

2. 为什么结构中同时引用 sass 与 scss

此举主要是针对 gulp 框架而做，gulp可以针对不同的文件类型做针对类型的处理，这样，在gulp处理我们自己编写的scss的时候，可以自动过滤掉sass，可以节省一定资源。

3. sass文件

sass 文件主要承载一些 预处理宏 变量，在gulp中只需引入这些sass文件，而无需编译，从而节省资源，而 scss 文件在gulp实践生产当中则负责各个页面的样式和一些框架样式，必定需要编译

index.sass 文件说明

index.sass 文件主要负责引入其它 基本样式重置文件 框架样式文件等，不可以在其中引入 包含宏 或者 变量的文件，webpack 的 sass-loader 并不能直接将这些宏 使各自的组件中直接使用
宏文件 和 变量文件只可在各自组件中单独引入

1
2
3
4
5
6
@import "./reset"
@import "./base"
@import "./iconfont"

@import "./frame"
@import "./public"
安装

vue-cli 中通过 npm install sass-loader node-sass webpack --save-dev
gulp 宏 npm install gulp-sass --save-dev

Posted on Edited on In

封装echarts组件

在父组件 data里 必须定义好图形初始的必须值，否则报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
lineChartsData:{
               id:'lineChart',
               height : 500,
               option:{
                   "xAxis":{
                       "name":"",
                       "data":[]
                   },
                   "series":{
                       "name":"",
                       "data":[]
                   }
               }
 },

传递数据只改变option的值 需要在封装的echarts组件里 watch

1
2
3
4
5
6
7
8
9
10
watch:{
        lineChartsData: {
          handler: function (val, oldVal) { 
            console.log("watch")
            this.initLineChart()
          },
          deep: true  //增加deep 观察对象的子对象变化
        }
    }

element-ui 的样式需要写在public.css里 因为如果写在封装的 elementui组件里 即使去掉scoped 打包build后还是不能覆盖原有样式

给分页组件传递当前页page 分页组件内部要通过watch 把page变成currentPage 否则会有警告 大义是子组件通过不正确的方法更改了父组件的值

父组件：

1
2
3
4
5
6
7
8
<pagination
        :pageSize = "pageSize"
        :total="total"
        :layout = "layout"
        :page="page"
        @pageChange="pageChange"
        >
</pagination>

分页组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<el-pagination
    :page-size="pageSize"
    :total="total"
    :layout = "layout"
    :current-page.sync = "currentPage"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
    >
</el-pagination>

  watch: {
    page: function (val, oldVal) {
          this.currentPage = val
       }
  }

vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。

https://zhuanlan.zhihu.com/p/29266022
父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
<gHeader></gHeader>

<style>
两种写法
.g-header /deep/ span.name{

}

.g-header >>> span.time{

}
</style>

子组件

1
2
3
4
5
6
<template>
  <div class="g-header">
    <span class="name"></span>
    <span class="time"></span>
  </div>
</template>

polyfill 与 transform-runtime

首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。
但是，存在如下两个问题：

异步加载组件时，会产生 polyfill 代码冗余
不支持对全局函数与实例方法的 polyfill

两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。

由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。

不支持全局函数（如：Promise、Set、Map），Set 跟 Map 这两种数据结构应该大家用的也不多，影响较小。但是 Promise 影响可能就比较大了。

不支持实例方法（如：’abc’.include(‘b’)、[‘1’, ‘2’, ‘3’].find((n) => n 等等），这个限制几乎废掉了大部分字符串和一半左右数组的新特性。

一般情况下 babel-plugin-transform-runtime 能满足大部分的需求，当不满足需求时，推荐使用完整的 babel-polyfill。

首先，从项目中移除 babel-plugin-transform-runtime
卸载该依赖：

1
npm un babel-plugin-transform-runtime -D

修改 babel 配置文件

1
2
3
4
5
6
7
8
// .babelrc
{
  //...
  "plugins": [
    // - "transform-runtime"
  ]
  //...
}

然后，安装 babel-polyfill 依赖：

1
npm i babel-polyfill -D

最后，在入口文件中导入

1
2
// src/main.js
import 'babel-polyfill'

Moment.JS 与 Webpack

在使用 Moment.js 遇到一些问题，发现最终打包的文件中将 Moment.js 的全部语言包都打包了，导致最终文件徒然增加 100+kB。查了一下，发现可能是 webpack 打包或是 Moment.js 资源引用问题（?），目前该问题还未被妥善处理，需要通过一些 trick 来解决这个问题。

在 webpack 的生产配置文件中的 plugins 字段中添加一个插件，使用内置的方法类 ContextReplacementPlugin 过滤掉 Moment.js 中那些用不到的语言包：

1
2
// build/webpack.prod.conf.js
new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(zh-cn)$/)

解决方案采自 oleg-nogin@webpack/webpack#3128。
问题讨论详见 GitHub Issue: moment/moment#2373、webpack/webpack#3128。

自定义路径别名

1
2
3
4
5
6
7
8
9
10
11
12
// build/webpack.base.js
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common':resolve('src/common'),
      'components':resolve('src/components'),
      'api': resolve('src/api'),
      'base':resolve('src/base')
    }
  }

获取表单控件值

通常我们可以直接使用 v-model 将表单控件与数据进行绑定，但是有时候我们也会需要在用户输入的时候获取当前值（比如：实时验证当前输入控件内容的有效性）。

这时我们可以使用@input或 @change事件绑定我们自己的处理函数，并传入 $event象以获取当前控件的输入值：

1
2
3
4
5
6
7
8
9
10
<input type="text"/>

change (e) {
  let curVal = e.target.value
  if (/^\d+$/.test(curVal)) {
    this.num = +curVal
  } else {
    console.error('%s is not a number!', curVal)
  }
}

项目路径配置

由于 vue-cli 配置的项目提供了一个内置的静态服务器，在开发阶段基本不会有什么问题。但是，当我们把代码放到服务器上时，经常会遇到静态资源引用错误，导致界面一片空白的问题。

这是由于 vue-cli 默认配置的 webpack 是以站点根目录引用的文件，然而有时候我们可能需要把项目部署到子目录中。

我们可以通过 config/index.js 来修改文件引用的相对路径：

1
2
3
4
5
build.assetsSubDirectory: 'static'
  build.assetsPublicPath: '/'
 
  dev.assetsSubDirectory: 'static'
  dev.assetsPublicPath: '/'

我们可以看到导出对象中 build 与 dev 均有 assetsSubDirectory、assetsPublicPath 这两个属性。

其中 assetsSubDirectory 指静态资源文件夹，也就是打包后的　js、css、图片等文件所放置的文件夹，这个默认一般不会有问题。

assetsPublicPath 指静态资源的引用路径，默认配置为 /，即网站根目录，与 assetsSubDirectory 组合起来就是完整的静态资源引用路径 /static。

写到这里解决方法已经很明显了，只要把根目录改为相对目录就好了：

1
2
build.assetsSubDirectory: 'static'
 build.assetsPublicPath: './'

没错！就是一个 . 的问题。ㄟ( ▔, ▔ )ㄏ

打包后背景图显示不出来的问题

百度

百度

使用vue-cli开发时跨域问题

打开config文件夹下的index.js,配置proxyTable：

百度

其中，taget是要访问的api的域名，配置完proxyTable后，若要访问’http://apis.haoservice.com/lifeservice/chicken/duck'，ajax里的url只需设为'/lifeservice/chicken/duck'(即绝对路径)即可，webpack会帮你把‘/lifeservice’下的请求转发至'http://apis.haoservice.com/lifeservice/chicken/duck'！

Posted on Edited on In

首先安装后在main.js里 import store from ‘./store’

1
2
3
4
5
6
7
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

异步请求需要修改state的时候用到action
一般2种场景 ，一种是异步请求回调里通过mutation修改state,一种是对多个mutations进行操作封装

步骤：

1
2
3
4
5
6
7
8
9
1,首先修改state,加一些数据状态
2，修改getters.js 这里边是一些对state数据的映射，映射到computed里,
里边可以写一些函数，处理state
3，通过mutations定义如何修改数据，首先先定义mutation-types
4,通过mutations修改state,mutation有俩参数，第一个state,第二个是参数
-------------------------------------------
如果需要修改actions：


在src下 新建store文件夹有以下文件

1
2
3
4
5
6
7
index.js   //入口文件
actions.js  
getters.js //包装 从getter取数据到组件中
mutations.js
mutation-types.js  //定义mutations.js里的常量
state.js

state.js

1
2
3
4
const state = {
  singer:{}
}
export default state

mutation-types.js

1
export const SET_SINGER = 'SET_SINGER'

mutations.js

1
2
3
4
5
6
7
8
9
10
11
12
import * as types from './mutation-types'

//mutaiton是一些修改方法 [types.SET_SINGER]是ES6的计算属性名 因为types.SET_SINGER
//是一个变量（虽然他引用了一个常量）所以要用中括号
//singer是提交mutation时传的参数 相当于官网说的payload
 const mutations = {
  [types.SET_SINGER](state,singer){
    state.singer = singer
  }
}

export default mutations

getters.js

1
2
//getter是包装 从getter取数据到组件中,return state.singer
export const singer = state => state.singer

actions.js

1
2
3
4
5
6
7
8
9
10
11
12
import * as types from './mutation-types'

//两个参数：第一个参数是:解构为commit方法,state 这应该是一个固定写法
//第二个参数是:是一个payload(载荷)
export const selectPlay = function({commit,state},{list,index}){
  commit(types.SET_SEQUENCE_LIST,list) //播放顺序列表
  commit(types.SET_PLAYLIST,list)  //播放列表
  commit(types.SET_CURRENT_INDEX,index) //当前播放歌曲的索引
  commit(types.SET_FULL_SCREEN,true) //打开播放器
  commit(types.SET_PLAYING_STATE,true) //播放状态
}

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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'
//每次通过mutation修改state的时候console.log
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)

//如果是npm run dev的时候就是dev环境
//如果npm run build时候就是production环境
//检测在开发环境下修改state是不是通过mutation
const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

//组件A:singer.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import {mapMutations} from 'vuex'

methods:{
  //VUEX官网：你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，
  //或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
  ...mapMutations({
    //SET_SINGER 对应mutation-types.js里的
    //映射的是一个方法 this.setSinger() 为 this.$store.commit('SET_SINGER')
    //直接commit 到mutations.js里的方法
    setSinger:"SET_SINGER"
  }),
  //具体触发的方法
  selectSinger(item){
    this.$router.push({
      path:`/singer/${item.id}`
    });
    //因为在mapMutations里做了映射，相当于this.$store.commit('SET_SINGER'，item)
    //执行了 mutations.js里对应的函数
    this.setSinger(item);
  }
}

//组件B:singer-detail.vue

1
2
3
4
5
6
7
8
9
10
11
12
import {mapGetters} from  'vuex'
export default{
  computed:{
    ...mapGetters([
      //映射store/getters.js里的singer,相当于在这个实例中挂载了singer这个属性
      'singer'
    ])
  },
  created(){
    console.log(this.singer)
  }
}

//组件C:用到actions因为要组合封装多个mutations

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {mapActions} from 'vuex'

export default{
  methods:{
    ...mapActions([
      'selectPlay'
    ]),
    //这里通过actions修改mutations,传入payload(载荷)
    selectItem(item,index){
        this.selectPlay({
          list:this.songs,
          index:index
        })
    },
  }
}

//组件D:用到getters取得多个actions提交后改变的状态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <template>
      <div class="player" v-show="playlist.length > 0">
        <div class="normal-player" v-show="fullScreen">
          播放器
        </div>
        <div class="mini-player" v-show="!fullScreen"></div>
      </div>
</template>

<script type="text/ecmascript-6">
import {mapGetters} from 'vuex'
export default{
  computed:{
    ...mapGetters([
      'fullScreen',
      'playlist'
    ])
  }
}

Posted on Edited on In

更换为next主题

进入hexo站点文件夹

1
2
cd your-hexo-site

clone Next代码并存放到 themes/next 目录下（用目前比较火的next主题为例）

1
2
git clone https://github.com/iissnan/hexo-theme-next themes/next

在站点 _config.yml 中修改:

1
2
theme: next

Read more »

Posted on Edited on In

配置环境

安装Node（必须）
作用：用来生成静态页面的
到Node.js官网下载相应平台的最新版本，一路安装即可。

安装Git（必须）
作用：把本地的hexo内容提交到github上去.
安装Xcode就自带有Git，我就不多说了,windows就去官网下载git。

申请GitHub（必须）
作用：是用来做博客的远程创库、域名、服务器之类的，怎么与本地hexo建立连接等下讲。
github账号我也不再啰嗦了,没有的话直接申请就行了，跟一般的注册账号差不多，SSH Keys，看你自己了，可以不配制，不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码，配置了就不需要了，怎么配置我就不多说了，网上有很多教程。

Read more »