上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

nuxt之vuex那点事

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    669

    主题

    5362

    回帖

    6270

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6270

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2022-7-4 12:07:57 | 显示全部楼层 | 阅读模式

    关于

    刚学nuxt没几个星期
    可能存在事实性出入
    请勿完全相信文章

    正文

    我们在nuxt的store写一个index.js

    export const state = () => {
      return {
        counter: 0,
      };
    };

    这里的state是一个函数
    因为
    https://vuex.vuejs.org/zh/guide/modules.html#%E6%A8%A1%E5%9D%97%E9%87%8D%E7%94%A8

    如果我们使用一个纯对象来声明模块的状态,那么这个状态对象会通过引用被共享,导致状态对象被修改时 store 或模块间数据互相污染的问题。
    
    实际上这和 Vue 组件内的 data 是同样的问题。因此解决办法也是相同的——使用一个函数来声明模块状态(仅 2.3.0+ 支持):

    服务端每一次访问地址,nuxt都会生成一次vuex
    这个时候为了防止同一个state被引用
    我们必须使用函数返回state来规避这个问题
    然后我们来研究一下具体的实现代码
    在.nuxt\store.js

    Vue.use(Vuex)
    
    let store = {};

    引入了vuex
    并且创建了一个store的空对象
    接下来是一个
    (function updateModules())()
    自执行函数

      store = normalizeRoot(require('..\\store\\index.js'), 'store/index.js')
    
      // If store is an exported method = classic mode (deprecated)
    
      if (typeof store === 'function') {
        return console.warn('Classic mode for store/ is deprecated and will be removed in Nuxt 3.')
      }
    
      // Enforce store modules
      store.modules = store.modules || {}

    获取了store对象,判断是否是一个函数
    如果是函数则提出降级警告
    并且判断modules,如果不存在给一个空对象
    然后暴露出一个函数
    图片.png
    常量const createStore
    如果store是函数则直接赋值函数
    如果是对象则返回一个箭头函数
    内部进行Object.assign合并
    然后创建vuex实例
    该函数在.nuxt\index.js调用
    图片.png
    调用createStore函数并且传入context上下文
    赋值上router以及registerModule函数
    然后混入到app对象中
    图片.png
    这里的app对象是一个拓展的初始化根实例选项
    图片.png
    当调用createApp得到app对象后
    会将app对象,store,router暴露出来
    然后初始化一个vue实例
    接下来往后走到了

      if (store._actions && store._actions.nuxtServerInit) {
        try {
          await store.dispatch('nuxtServerInit', app.context)
        } catch (err) {
          console.debug('Error occurred when calling nuxtServerInit: ', err.message)
          throw err
        }
      }

    判断是否存在nuxtServerInit函数,如果存在则调用
    后边就基本没sotre什么事了
    收工~

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表