vue脚手架的使用和安装3

less在vue中的使用

代码如下：

npm install ，就会自动加载package.json文件中依赖资源；

使用less就必须安装以下的less编译插件：
npm install --save-dev less
npm install --save-dev less-loader

注意：建议大家安装在开发环境下面；
如何安装在开发环境下面： 
必须使用的语法： npm install --save-dev 插件名

改造步骤：

将项目中所有css文件后缀名改成less文件；
将所有的引入代码改成如下：

<style lang="less" scoped src="./vs.less"></style>

注意：使用了less就统一使用嵌套规则编写style样式表！

Vuex的学习

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
本质是一个全局的数据。

安装

NPM：

npm install vuex --save

注意：这里是安装到生产环境下面！

什么是状态管理模式

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。
简易流程：state–>view–>actions

使用步骤（内部安装和使用）

内部安装代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'//导入全局的数据状态

Vue.use(Vuex);

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

使用代码如下：

this.$store.state.storeName

vuex–state

获取到仓库中的数据语法：this.$store.state.storeName

state使用规范

state不能直接修改；
一般使用计算（computed）属性和state结合使用；
建议同学们使用对象展开运算符,辅助函数（…mapState）和计算数据结合使用；

最终代码如下：

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
    data() {
        return {
            name: ""
        };
    },
    computed: {
        // storeName() {
        //     return this.$store.state.storeName;
        // },
        // obj() {
        //     return this.$store.state.obj;
        // }
        // 使用对象展开运算符将此对象混入到外部对象中
        ...mapState([
            // 映射 this.storeName 为 store.state.storeName
            'storeName',
            'obj'
        ])
    },
    mounted() {
        console.log(this.$store.state.storeName);//不符合要求
        // this.obj = this.$store.state.obj;
        // this.obj.hello = "fdklfds";
        console.log(this.$store.state.storeName);//不符合要求
        //this.$store.state.storeName = "666666";//规范：state不能直接修改
        // this.name=
        console.log(this.storeName);
        console.log(this.obj);
    }
}

vuex-getter

getter就是vuex中的计算属性；

为啥要使用getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

getter接收2个参数

代码如下：

personInfo(state, getters) {
    let obj = {
        lastName: state.lastName,
        firstName: state.firstName,
        // fullName: state.firstName + state.lastName,
        fullName: getters.fullName,
        age: state.age
    }
    return obj;
}

安装：

使用方式（推荐使用…mapGetters辅助函数获取）
代码格式如下：

// 在单独构建的版本中辅助函数为 Vuex.mapState,mapGetters
import { mapState, mapGetters } from 'vuex'

export default {
    data() {
        return {
            name: ""
        };
    },
    computed: {
        // storeName() {
        //     return this.$store.state.storeName;
        // },
        // obj() {
        //     return this.$store.state.obj;
        // }
        // 使用对象展开运算符将此对象混入到外部对象中
        ...mapState([
            // 映射 this.storeName 为 this.$store.state.storeName
            // this.storeName-->组件的计算属性
            'storeName',
            'obj'
        ]),
        //推荐使用mapGetter来获取 getters
        ...mapGetters([
            //映射 this.fullName 为 this.$store.getters.storeName
            'fullName'
        ])
    },
    mounted() {
        console.log(this.$store.state.storeName);//不符合要求
        // this.obj = this.$store.state.obj;
        // this.obj.hello = "fdklfds";
        console.log(this.$store.state.storeName);//不符合要求
        //this.$store.state.storeName = "666666";//规范：state不能直接修改
        // this.name=
        console.log(this.storeName);
        console.log(this.obj);
    }
}

vuex-mutation学习

如果要修改state中的数据，只能在mutation中修改；
mutation是一个对象
提交载荷（Payload）：通俗点说，就是参数（所有数据类型都支持）；
提交方式有2中，
一种是普通方式提交数据

this.$store.commit("changeStoreName", {
    name: "小丸子"
});

另一种：对象风格提交数据：

this.$store.commit({
    type: "changeStoreName",
    stoerObj: {
        name: "小丸子"
    }
});

使用常量替代 Mutation 事件类型

mutation.js代码如下：

import * as types from './mutation-types'
export default {
    [types.CHANGE_STORE_NAME](state, payload) {
        console.log(payload);
        state.storeName = payload.stoerObj.name;
    },
    [types.AJAX_CHANGE_STORE_NAME](state, payload) {
        setTimeout(() => {
            state.storeName = "异步访问数据";
        }, 2000);
    }
}

mutation-types.js代码如下：

export const CHANGE_STORE_NAME = 'CHANGE_STORE_NAME';
export const AJAX_CHANGE_STORE_NAME = 'AJAX_CHANGE_STORE_NAME';
export const AJAX_CHANGE_STORE_NAME1 = 'AJAX_CHANGE_STORE_NAME1';
export const AJAX_CHANGE_STORE_NAME2 = 'AJAX_CHANGE_STORE_NAME2';
export const AJAX_CHANGE_STORE_NAME3 = 'AJAX_CHANGE_STORE_NAME3';
export const AJAX_CHANGE_STORE_NAME4 = 'AJAX_CHANGE_STORE_NAME4';
export const AJAX_CHANGE_STORE_NAME5 = 'AJAX_CHANGE_STORE_NAME5';
export const AJAX_CHANGE_STORE_NAME6 = 'AJAX_CHANGE_STORE_NAME6';

使用代码如下：

import { CHANGE_STORE_NAME } from 'store/mutation-types'

this.$store.commit({
    type: CHANGE_STORE_NAME,
    stoerObj: {
        name: "小丸子"
    }
});

Mutation 必须是同步函数（重点）

一条重要的原则就是要记住 mutation 必须是同步函数。为什么？请参考下面的例子：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

install命令的总结

npm install --save-dev 插件名：安装在开发环境下面；
npm install --save 插件名：安装生产环境下面；
npm install -g 插件名：安装全局路径下面

es6学习之对象展开运算符

参考api：https://www.cnblogs.com/mingjiezhang/p/5903026.html

es6对象属性语法糖

案例如下：

state,//--》state:state
getters,//-->getters:getters
mutations//-->mutations:mutations

es6导入语法的学习

export.default --> import state from ‘./state’//导入全局的数据状态
– exprots const 常量（数组，字符串，数组，所有数据类型）–>
两种：
import * as types from ‘./mutation-types’
import { CHANGE_STORE_NAME } from ‘store/mutation-types’