公司网站制作招聘,陕西百度推广的代理商,企业网站制作的公司,h5教程入门自定义创建项目
目标#xff1a;基于 VueCli 自定义创建项目架子
大致步骤#xff1a;
安装脚手架创建项目 vue create 项目名称选择自定义 选择 Manually select features 这一项
step-1:按下空格 : 选择/取消--勾选请选择#xff1a;Babel、Router、CSS、Linterstep-2…自定义创建项目
目标基于 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 storeimport Vue from vue
import App from ./App.vue
import store from store/indexVue.config.productionTip falsenew Vue({render: h h(App),store
}).$mount(#app)templatediv{{ $store.state.title }}/div
/templatemutations
import Vue from vue
import Vuex from vuexVue.use(Vuex)// 创建仓库
const store new Vuex.store({// 严格模式有利于初学者检测不规范的代码stricttrue,// 1. 通过 state 可以提供数据state: {title: 大标题,count: 100}// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有 mutation 函数第一个参数都是 stateaddCount (state, n) {// 修改数据state.count n},changeTitle (state) {state.title 临时标题}}
})// 导出给main.js使用
export default storetemplatedivbutton clickhandleAdd(1)值 1/buttonbutton clickhandleAdd(5)值 5/buttonbutton clickhandleTitle改变标题/button/div
/templatescriptexport default {name: test,methods: {handleAdd (n) {this.$store.commit(addCount, n)},handleTitle () {this.$store.commit(changeTitle)}}}
/scriptmapMutations
mutations: {subCount (state, n) {state.count - n}
}import mapMutations from vuexmethods: {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 vuexmethods: {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/userVue.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
