Vue-4

自定义创建项目

目标：基于 VueCli 自定义创建项目架子

大致步骤：

• 安装脚手架
• 创建项目 vue create 项目名称
• 选择自定义 选择 Manually select features 这一项

step-1:
	按下空格 : 选择/取消--勾选
	请选择：Babel、Router、CSS、Linter

step-2:
关于 history 模式：不选择启用

step-3:
	选择启用 Less
	
step-4:
	选择使用"无分号规范"——ESLint + Standard config

step-5:
	选择 Lint on save

step-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 = false

new 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 函数，第一个参数，都是 state
    	addCount (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) {								// 形参第一个参数必须是state
		return 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>