前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >lerna + vue3.0 中定义hooks包 无法触发视图更新

lerna + vue3.0 中定义hooks包 无法触发视图更新

作者头像
copy_left
发布2020-10-29 10:24:40
8300
发布2020-10-29 10:24:40
举报
文章被收录于专栏:方球方球

项目目录

  • root
    • apps
      • app-1
      • app-2
    • pkgs
      • utils
      • hook

问题描述

使用lerna 管理微前端项目时, 开发的独立工具包与项目依赖于同一vue版本, 工具包开发的hook工具,在项目中无法触发视图更新。

源码

代码语言:javascript
复制
// pkgs/hook/useToggle.js
export function useToggle(initStatus?:any, reverseValue?:any){
  const state = ref(initStatus === undefined ? false : initStatus)
  const reverseValueOrigin = computed(() => { return reverseValue === undefined ? !initStatus : reverseValue })


  function toggle(value?:any){
    if(value !== undefined){
      state.value = value === initStatus ? reverseValueOrigin.value : initStatus
    }
    state.value = state.value === initStatus ? reverseValueOrigin.value : initStatus
  }
  
  const setLeft = () => { state.value = initStatus }
  const setRight = () => { state.value = reverseValueOrigin.value }


  return {
    state,
    toggle,
    setLeft,
    setRight
  }
代码语言:javascript
复制
// app-1
<template>
 {{ state }}
 <a-button @click='setLeft'> setLeft </a-button>
 <a-button @click='setRight'> setRight </a-button>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useToggle } from '@micro/hooks'


export default defineComponent({
  setup(){
    const { state, setLeft, setRight } = useToggle('1', 0)


    return {
      state,
      setLeft,
      setRight
    }
  }
});
</script>

问题原因

尝试将app-1和hooks包的vue版本打印比较后,我们能发现,当前存在两个不同版本的vue包。 顺着app-1的node_modules, 可以发现两者的依赖问题。

我们知道npm的node_modules依赖查询规则,遵守就近原则, 既先查询当前目录的node_modules, 未查到时,再查询父目录的node_modules,以此类推。

使用lerna 安装本地包时,本地包是以链接的方式将依赖直接指向开发包目录。而开包包都需要安装本地依赖,由此本地包查询到的vue版本始终无法与项目依赖同步。

所以造成了vue视图无法更新的问题。

解决方案

既然是依赖问题,那我们只要将依赖统一,问题自然就解决了。

这里使用了 workspaces

  1. 配置 workspaces
代码语言:javascript
复制
// 根目录lerna.json
{
  "npmClient": "yarn",
  "useWorkspaces": true,
  ...
}
// 根目录
"private": true,
 "workspaces": [
    "pkgs/*",  // 依赖包目录
    "demo/*",
    "eslint-config/*"
 ]
  1. 重构node_modules
代码语言:javascript
复制
// 清空node_modules
learn clean
// 重新安装node_moduels
learn bootstrap

文档

Lerna 中文教程详解

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 项目目录
  • 问题描述
  • 源码
  • 问题原因
  • 解决方案
  • 文档
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档