Vue-4

自定义创建项目

目标：基于 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>