自定義創建項目

目標：基于 VueCli 自定義創建項目架子

大致步驟：

• 安裝腳手架
• 創建項目 vue create 項目名稱
• 選擇自定義 選擇 Manually select features 這一項

step-1:按下空格 : 選擇/取消--勾選請選擇：Babel、Router、CSS、Linterstep-2:
關于 history 模式：不選擇啟用step-3:選擇啟用 Lessstep-4:選擇使用"無分號規范"——ESLint + Standard configstep-5:選擇 Lint on savestep-6:選擇"In dedicated config files" 將配置文件放在單獨文件中step-7:Save this as a preset for future projects? (選擇 no)

ESlint 代碼規范

代碼規范：一套寫代碼的約定規則

規范的作用：正規的團隊需要統一的編碼風格

JavaScript Standard Style 規范說明：https://standardjs.com/rules-zhcn.html

代碼不規范的解決方案：

• 手動修正：根據命令行的語法報錯提示去修改
• 自動修正：借助 vscode 插件 ESLint 高亮錯誤，并通過一些配置，實現自動幫助我們修復錯誤

認識 vuex

介紹

vuex 是一個 vue 的狀態管理工具(插件)，狀態就是數據，它可以幫助我們管理 vue 通用的數據(多組件共享的數據)

場景

多個組件共同維護一份數據(購物車)

優勢

• 共同維護一份數據，數據集中化管理
• 響應式變化
• 操作簡潔（vuex 提供了一些輔助函數）

其他

state		倉庫，用來存放數據
mutations	修改，用來修改數據
actions		異步，用力管理異步
getters		獲取，用來篩選結果

state

// 這里面存放的就是vuex相關的核心代碼
import Vue from 'vue'
import Vuex from 'vuex'// 插件安裝
Vue.use(Vuex)// 創建倉庫
const store = new Vuex.store({// 通過 state 可以提供數據（所有組件共享這一份數據）state: {title: '大標題',count: 100}
})// 導出給main.js使用
export default store

import Vue from 'vue'
import App from './App.vue'
import store from '@store/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

<template><div>{{ $store.state.title }}</div>
</template>

mutations

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)// 創建倉庫
const store = new Vuex.store({// 嚴格模式（有利于初學者，檢測不規范的代碼）strict：true,// 1. 通過 state 可以提供數據state: {title: '大標題',count: 100}// 2. 通過 mutations 可以提供修改數據的方法mutations: {// 所有 mutation 函數，第一個參數，都是 stateaddCount (state, n) {// 修改數據state.count += n},changeTitle (state) {state.title = '臨時標題'}}
})// 導出給main.js使用
export default store

<template><div><button @click="handleAdd(1)">值 + 1</button><button @click="handleAdd(5)">值 + 5</button><button @click="handleTitle">改變標題</button></div>
</template><script>export default {name: 'test',methods: {handleAdd (n) {this.$store.commit('addCount', n)},handleTitle () {this.$store.commit('changeTitle')}}}
</script>

mapMutations

mutations: {subCount (state, n) {state.count -= n}
}

import mapMutations from 'vuex'methods: {subCount (n) {this.$store.commit('subCount', n)}
}// 上面的代碼等價于下面的methods: {...mapMutaions(['subCount'])
}

this.subCount(10)	// 調用

actions

mutations: {changeCount (state, newCount) {state.count = newCount}
}

action: {setAsyncCount(context, res) {// 這里是用setTimeout模擬異步，以后大部分場景是"發送請求"setTimeout(() => {context.commit('changeCount', res)}, 1000)}
}

this.$store.dispatch('setAsyncCount', 200)

mapActions

actions: {changeCountAction (context, num) {setTimeout(() => {context.commit('changeCount', num)}, 1000)}
}

import mapActions from 'vuex'methods: {changeCountAction (n) {this.$store.dispatch('changeCountAction', n)}
}// 上面的代碼等價于下面的methods: {...mapActions(['changeCountAction'])
}

this.changeCountAction(666)		// 調用

getters

state: {list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

getters: {filterList (state) {								// 形參第一個參數必須是statereturn state.list.filter(item => item > 5)		// 必須要有返回值}
}

<div>{{ $store.state.list }}</div>				<!-- [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] -->
<div>{{ $store.getters.filterList }}</div>		<!-- [6, 7, 8, 9, 10] -->

vuex 模塊化

出現的問題：

由于 vuex 使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象
當應用變得非常復雜時，store 對象就有可能變得相當臃腫
即：當項目變得越來越大的時候，vuex 會變得越來越難以維護

解決的辦法：

使用模塊化管理，在 store/modules 文件夾下創建你需要的模塊，例如：

• store/modules/user.js

const state = {userInfo: {name: 'zs',age: 18},score: 80
}
const mutations = {}
const actions = {}
const getters = {}export default {namespaced: true,state,mutations,actions,getters
}

在 store/index.js 文件里使用你創建的模塊

• store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'Vue.use(Vuex)const store = new Vuex.Store({strict: true,state: {},getters: {},mutations: {},actions: {},// 使用模塊modules: {user,}
})export default store

訪問方式

• 方式一

<div>{{ $store.state.user.userInfo.name }}</div>

• 方式二

<script>
import { mapState } from "map";
export default {computed: {...mapState(["user"]),...mapState("user", ["userInfo"]),},
};
</script>