项目中用Vue的各种踩坑记录

一:安装报错

使用yarn安装依赖报错内容为

error @typescript-eslint/eslint-plugin@5.8.1: The engine "node" is incompati

解决办法

yarn config set ignore-engines true

#二:项目中引入多模块开发vuex

1. index.js

import Vue from 'vue'
import Vuex from 'vuex'
import menus from './modules/menus'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
import area from './modules/area'
const store =  new Vuex.Store({
  modules: {
    menus,
    area,
    user
  },
  getters
})
export default store

2.getter.js

const getters = {
  //  方法: =》 state.对象名.对象里属性名
  // eg1:
  allAreaData: state => state.area.allAreaData,

}
export default getters

3.其中一个js:(area.JS)


const area={

    state:{
        allAreaData: ["西安","上海","中国"],

    },}

在页面中引用


//    对象名.对象里的属性名
  mounted:function(){
   console.log(this.$store.state.area.allAreaData);
    console.log(this.$store.state.area.allAreaData);
  },

其中 ...mapGetters(['number'])

getters就类似于vue组件中的computed(计算属性),在组件中引入mapGetters就是将vuex中的数据映射到组件的计算属性当中,在组件不多,组件的数据通信不是很多的时候这样写看似将简单的东西复杂化了,但是在稍复杂点的项目中这样会极大的减少工作量.
------- 值引入到vue --------

三:项目中引用VueI18n

在项目中把一些官方的区域号码存到里面,当需要显示的时候根据区域编码显示成实际的区域名字、
``

vue注入html在js中写法:
```bash
h('div', {
   domProps: {
       innerHTML: this.userProvidedHtml 
   }
})
end

评论