（Vue2）自定义创建项目、ESLint、Vuex

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

安装脚手架->创建项目->选择自定义->Babel/Router/CSS/Linter

路由配置项很多，希望创建项目时就把架子搭好

hash模式和history模式  页面跳转和加载模式

Vue为单页面，只有一个HTML物理文件。通过路由系统将项目组件与URL路径绑定。一个HTML物理文件，切换页面时既需要让访问的URL路径变，又不能触发HTML物理文件重新加载，就使得VueRouter的跳页模式不能使用普通的超链接方式。

hash模式：使用锚点技术重写URL访问路径，在原有URL路径后拼接/#/xxx

显示新Dom对象，隐藏旧dom对象  hash模式是纯静态路由

history模式：直接重写url，视觉上更美观  不是纯静态路由

Use history node  for router?n

ESLint+Standard config无分号规范

Lint on save保存时校验

In dedicated config file放在单独的文件里，便于管理

ESLint自动修复

设置->（右上角）打开设置

//当保存的时候，ESLint自动帮我们修复错误
"editor.codeActionsOnSave":{"source.fixAll":true
},
//保存代码，不自动格式化
"editor.formatOnSave":false

vuex状态管理工具  管理vue通用的数据（多组件共享的数据）

场景：某个状态在很多个组件来使用（个人信息）；多个组件共同维护一份数据

优势：共同维护一份数据，数据集中化管理；响应式变化；操作简洁（vuex提供了辅助函数）

基于脚手架创建项目，构建vuex（多组件数据共享）环境

创建项目，创建三组件，

安装Vuex插件，初始化一个空仓库：安装vuex@3（都是小写）

->新建store文件夹/index.js专门放Vuex

->Vue.use(Vuex)创建仓库new Vuex.Store()

->main.js中导入挂载        检验：App.vue中打印（this.$store）

（类似于配置VueRouter，多了.Store）

state状态

给仓库提供数据：store中state提供唯一的公共数据源

//创建仓库
const store=new Vuex.store({//state状态，即数据，类似与vue组件中的data//区别：data：是组件自己的数据;state:所有组件共享的数据state:{count:101}
})

使用仓库数据：

1通过store直接访问

获取store
(1)this.$store
(2)import导入store
模板中：{{$store.state.xxx}}
组件逻辑中：this.store.state.xxx
JS模块中：store.state.xxx

2通过辅助函数（简化） 

{{count}}
computed:{count(){retune this.$store.state.count}
}

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

导入import {mapState} from 'vuex'

->数组方式引入state   mapState(['count','title'])

->展开运算映射符  在computed：{}中写...mapState(['count','title'])，页面中使用直接{{count}}

mutations修改数据

通过strict:true可以开启严格模式：利于初学者检测代码，上线时需要关闭

vuex遵循单项数据流，组件中不能直接修改数据，state数据只能通过mutations来修改

所有mutations函数，第一个参数都是state    mutations：{对数据操作的函数（state,其他参数如n） state.count+=n}

子组件调用时this.$store.commit('函数名字'，n)

mutations练习：输入框值和state值双向绑定

1输入框内容渲染：value

2监听输入获取内容@input=“handleInput”     

3封装mutations处理函数    mutations：{changeCount（state，newCount）{}}

4调用传参commit调用   handleInput（e）{this.$store.commit('changeCount',num)}

辅助函数mapMutations(类似于mapState)

导入import {mapState,mapMutations} from 'vuex'

->数组方式引入state   mapMutations(['subCount'])

->展开运算映射符  在methods：{}中写...mapMutations(['subCount'])，页面中使用直接this.subCount(10)调用

actions处理异步操作

mutations必须是同步的（便于监测数据变化，记录调试）

1提供actions方法，不能直接操作state

//context上下文(此处未分模块，可以当成store仓库)

actions：{setAsynCount (context,num){//一秒后给一个数去修改numsetTimeout(()=>{context.commit('changeCount',num)},1000)}
}

2页面中dispatch调用

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

mapActions

导入import {mapState,mapMutations,mapActions} from 'vuex'

->数组方式引入state   mapActions(['changeCountAction'])

->展开运算映射符  在methods：{}中写...mapActions(['changeCountAction'])，页面中使用直接this.changeCountAction(666)调用

getters(类似于计算属性)

1定义getters

getters:{//getters函数第一个参数是state,必须要有返回值filterList(state)//过滤{return state.list.filter(item=>item>5)}
}

2访问getters

通过store访问getters

{{$store.getters.filterList}}

通过辅助函数mapGetters映射

computed:{...mapGetters(['filterList'])},

{{filterList}}

模块module（进阶语法）

vuex使用单一状态树，应用的所有状态会集中到一个较大的对象。store对象可能变得臃肿。

user模块：store/modules/user.js

const state={userInfo:{name}
}
const mutations={}
const actions={}
const getters={}
export default{state,mutations,actions,getters
}

import users from './modeuls/user'
const store = new Vuex.store({modules:{user}
})

1直接通过模块名访问

多个参数封装成对象传递{id,newCount},接收时额外参数就是obj

$store.state.模块名.xxx
$store.getters['模块名/xxx']
​$store.commit('模块名/xxx',额外参数)//mutations
$store.dispatch('模块名/xxx',额外参数)//action

2通过mapState映射

子模块的映射...mapState('模块名'，['xxx'])、...mapGetters('模块名'，['xxx'])、...mapMutations('模块名'、...mapActions('模块名'，['xxx'])，['xxx'])需要开启命名空间：在模块内导出部分export default{}加上namespaced：true，