Vue项目中遇到的问题

1.（Android）input输入完内容后点击空白处input不失焦，连续点击空白处时软键盘反复弹出&收起（textarea同理）
解：在入口文件main.js中增加一段js来解决该BUG；

document.querySelector('body').addEventListener('touchend', function (e) {
  let len = document.querySelectorAll('input').length || 0
  if (len < 1) {
    return
  }
  let tagName = e.target.tagName.toLowerCase()
  if (tagName !== 'input') {
    for (let i = 0; i < len; i++) {
      document.querySelectorAll('input')[i].blur()
    }
  }
})

2.关于刷新页面后vuex中的数据丢失
解：可以使用vuex-persist来持久化vuex数据
首先安装vuex-persist

npm install -S vuex-persist

然后在store文件夹中新建vuex-persist.js，写入如下内容

import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
  key: '__project-name__',
  storage: window.sessionStorage
})
export default vuexLocal

最后在store文件夹内的index.js中引入调用即可

import vuexPersist from './vuex-persist'
const vuexPersistPlugin = vuexPersist.plugin
export default new Vuex.Store({
  plugins: [vuexPersistPlugin]
})

3.vuex-persist和vuex logger一起使用时vue.min.js中forEach处报错？
解：解决forEach报错

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
import vuexPersist from './vuex-persist'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
const logger = [createLogger()]
const vuexPersistPlugin = vuexPersist.plugin
const vuexPlugins = [
  vuexPersistPlugin,
  logger
]
console.log(vuexPlugins)
export default new Vuex.Store({
  plugins: vuexPlugins
})
// console结果[ƒ, Array(1)]

解决方法：debug情况下改为非数组即可

const logger = createLogger()
const vuexPlugins = debug ? [vuexPersistPlugin, logger] : [vuexPersistPlugin]

4.修复ios12+特定版本微信端软键盘收起后底部留白
解：在入口文件main.js中增加一段js来解决该BUG；

function fixWeChatView () {   
  (/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => {
    // 这里加了个类型判断，因为a等元素也会触发blur事件
    [ 'input', 'textarea' ].includes(e.target.localName) && document.body.scrollIntoView(false)
   }, true) 
}
fixWeChatView()