自定义创造项目

步骤

ESlint代码规范

手动修正

自动修正

{
    "editor.fontSize": 16,
    "liveServer.settings.donotShowInfoMsg": true,
    "window.menuBarVisibility": "compact",
    "emmet.triggerExpansionOnTab": true,
    //当保存的时候，eslint 自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    //保留代码不格式化
    "editor.formatOnSave": false
}

vuex的基本认知

构建多组件共享数据环境

1。创建项目

vue create vuex-demo

2.创建三个组件，目录如下 components son1.vue son2.vue app.vue

3.源代码 app.vue在入口处引入son1,son2这两个组件

完整代码

App.vue

<template>
  <div>
    <h1>根组件</h1>
    <input type="text">
    <Son1></Son1>
    <hr>
    <Son2></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'

export default {
  name: 'app',
  data: function () {
    return {

    }
  },

  components:{
    Son1,
    Son2
  }
}
</script>

<style>
</style>

Son1.vue

<template>
  <div class="box">
    <h2>Son1</h2>
    从vuex中获取的值<label for=""></label>
    <br>
    <button>值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com'

}
</script>

<style lang="css" scoped>
.box{
    border: 3px solid #ccc ;
    width: 400px;
    padding: 10px;
    margin: 20px;
}
h2{
    margin-top: 10px;
}
</style>

son2.vue

<template>
  <div class="box">
    <h2>Son2子组件</h2>
    从vuex中获取的值：<label for=""></label>
    <br>
    <button>值-1</button>
  </div>
</template>

<script>
export default {
  name: 'Son2Com'

}
</script>

<style lang="css" scoped>
.box{
    border: 3px solid #ccc ;
    width: 400px;
    padding: 10px;
    margin: 20px;
}
h2{
    margin-top: 10px;
}
</style>

创建一个空仓库

这个空仓库时为了后续需要的组件等放入仓库空需要的话直接去仓库中去，不用再子传父依次传递

//这里存放vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'

//插件安装
Vuex.use(Vuex)

//创建仓库
const store = new Vuex,Store()

//导出给main.js使用
export default store

state状态

如何向仓库提供数据如何使用仓库数据

提供数据

index.js


import Vue from 'vue'
import Vuex from 'vuex'

Vuex.use(Vuex)

const store = new Vuex.Store({
  state: {
    title: '大标题',
    count: 100
  }

})

export default store

使用数据

App.vue

<h1>根组件--{{$store.state.title }}</h1>

通过辅助函数简化代码

maspState辅助函数，帮助我们把store中的数据自动映射到组件计算属性中


<template>
  <div class="box">
    <h2>Son2子组件</h2>
    从vuex中获取的值：<label for="">{{ count }}</label>
    <br>
    <button>值-1</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['count'])

  }
}
</script>

mutations

明确vuex同样遵循单项数据流，组件不可直接修改仓库数据

自定义创建项目