（Vue2）自定义创建项目、ESLint、Vuex-CFANZ编程社区

自定义创建项目：基于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){
  //一秒后给一个数去修改num
    setTimeout(()=>{
      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，

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