vue小白教程（四）需要注意的是项目的名称不能大写，不然会报错。 2 . 获取 state下的值

脚手架创建

vue-cli 搭建项目

一般下载依赖都是用cnpm是国内的比较快比起npm来说

全局安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

全局安装 vue-cli

cnpm install -g vue-cli

一般情况下是不会有问题，有问题的话可以检查一node版本---node -v，最好是在6以上

安装好之后，cd进入到你根目录下面输入

vue init webpack

需要注意的是项目的名称不能大写，不然会报错。

1.项目名称、2.项目描述、3.作者、4.打包方式、5.是否使用ESLint规范代码

执行完成之后，得到的目录是这样、

cnpm dev run 就运行起来项目了如下图

vuex 辅助函数高级用法

*** src 建一个文件夹叫store下建一个index.js 内容如下

import * as types from './types.js'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

/**
 * state
 */

const state = {
   
    asideCur: 1// 测试

}

/**
 * getters
 */
const getters = {
  
    asideCur: state => state.asideCur
}

/**
 * mutations
 */
const mutations = {

    [types.SET_ASIDE_CUR] (state, playload) {
        state.asideCur = playload || {}
    }
}

/**
 * actions
 */
let actions = {

}
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

在建一个type.js

// 设置测试
export const SET_ASIDE_CUR = `SET_ASIDE_CUR`

在组件总使用

第一步引入

```
import { mapMutations } from 'vuex'
```

2 写方法

```
   ...mapMutations({
            asideCur: `SET_ASIDE_CUR`
        }),
```

3 调用改值

```
     methods: {
    ...mapMutations({
        asideCur: `SET_ASIDE_CUR`
    }),
    //调用改值
    dianji(){
        this.asideCur(10)
    }
 
},
```
这样就把 store下index中state里的asideCur=1 改成了等于10

4 获取

1 同样

```
import { mapGetters } from 'vuex'
 ```

2 . 获取 state下的值

```
computed: {
// ...mapGetters(['asideCur'])
 },
```
使用的时候直接this.asideCur就可以了

Vue下路由History mode导致页面无法渲染的原因，你们知道为什么吗？

前期王盼盼已经也迷惑，之前在公司也弄过，但就是稀里糊涂

第一种办法

就是在的所有的路由前面加你根目录名字

第2种，

后台解决

需要注意的是 //当项目不在根目录时，必须添加子目录路径，否则空白页面（资源加载正常） base: '/COMS',

王叔看了几个文章，认为这个文章的帮助最大关于配置类 www.jianshu.com/p/77c5a189e… 希望对你们有帮助

今天就又结束咯，希望对你们有帮助吧，觉的还不错的话，求赞

vue小白教程（四）