油猴脚本使用Zustand

tansuo

本帖最后由 tansuo 于 2023-10-27 09:30 编辑

油猴脚本使用Zustand时好像加载不到Zustand库 请问如何解决

// ==UserScript==
// @name         My Greasemonkey Script
// @namespace    http://your-namespace.example/
// @version      1.0
// @description  Example script using Zustand in Greasemonkey
// @match        http://127.0.0.1/*
// @require      https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.development.js
// ==/UserScript==
(function () {
    'use strict';
    console.log(`3333: `);
    // 导出Zustand库到全局对象
    const { create } = window.Zustand;
    // 创建状态存储对象
    const useStore = create((set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 })),
        decrement: () => set((state) => ({ count: state.count - 1 })),
    }));
    // 获取当前状态
    const currentState = useStore.getState();
    console.log(currentState);
    console.log(`2222: ${currentState}`);
    // 调用操作来更新状态
    useStore.getState().increment();
    useStore.getState().increment();
    useStore.getState().decrement();
    // 获取更新后的状态
    const updatedState = useStore.getState();
    console.log(updatedState);
    console.log(`1111: ${updatedState}`);
})();

李恒道

善读论坛指南

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.zustandVanilla = {}));
})(this, (function (exports) { 'use strict';

标准的umd格式，global是this，复制到了zustandVanilla 为对象
所以获取对象应该是this.zustandVanilla
导出有

  exports.createStore = createStore;
  exports.default = vanilla;
  Object.defineProperty(exports, '__esModule', { value: true });

应该拿createStore方法
this.zustandVanilla.createStore才是create的函数
完整代码

// ==UserScript==
// @name         My Greasemonkey Script
// @namespace    http://your-namespace.example/
// @version      1.0
// @description  Example script using Zustand in Greasemonkey
// @match        https://bbs.tampermonkey.net.cn/thread-5233-1-1.html
// @require      https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.development.js
// ==/UserScript==

console.log(`3333: `);
// 导出Zustand库到全局对象
const create = this.zustandVanilla.createStore;
// 创建状态存储对象
const useStore = create((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
}));
// 获取当前状态
const currentState = useStore.getState();
console.log(currentState);
console.log(`2222: ${currentState}`);
// 调用操作来更新状态
useStore.getState().increment();
useStore.getState().increment();
useStore.getState().decrement();
// 获取更新后的状态
const updatedState = useStore.getState();
console.log(updatedState);
console.log(`1111: ${updatedState}`);

参考资料
https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=3054
https://learn.scriptcat.org/docs/library/Vue%E7%9A%84%E5%BC%95%E7%94%A8/
https://learn.scriptcat.org/docs/library/Element%20Plus%E7%9A%84%E5%BC%95%E7%94%A8/

王一之

是这个对象？对这个库不了解，要么就是这个require有问题，我看了一下内容，很少

fastly.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.development.js

zustandVanilla

tansuo

如何解决那，大佬

tansuo

王一之 发表于 2023-10-27 09:45
是这个对象？对这个库不了解，要么就是这个require有问题，我看了一下内容，很少

fastly.jsdelivr.net/npm ...

如何解决，大佬

王一之

我重新打了一个包，楼主可以试试

Zustand
https://scriptcat.org/zh-CN/script-show-page/1350

// @require https://scriptcat.org/lib/1350/1.0.0/Zustand.js

// ==UserScript==
// @name         My Greasemonkey Script
// @namespace    http://your-namespace.example/
// @version      1.0
// @description  Example script using Zustand in Greasemonkey
// @match        https://bbs.tampermonkey.net.cn/thread-5233-1-1.html
// @require      https://scriptcat.org/lib/1350/1.0.0/Zustand.js
// ==/UserScript==

(function () {
    'use strict';
    console.log(`3333: `);
    // 导出Zustand库到全局对象
    const { create } = window.Zustand;
    // 创建状态存储对象
    const useStore = create((set) => ({
        count: 0,
        increment: () => set((state) => ({ count: state.count + 1 })),
        decrement: () => set((state) => ({ count: state.count - 1 })),
    }));
    // 获取当前状态
    const currentState = useStore.getState();
    console.log(currentState);
    console.log(`2222: ${currentState}`);
    // 调用操作来更新状态
    useStore.getState().increment();
    useStore.getState().increment();
    useStore.getState().decrement();
    // 获取更新后的状态
    const updatedState = useStore.getState();
    console.log(updatedState);
    console.log(`1111: ${updatedState}`);
})();

tansuo

王一之 发表于 2023-10-27 10:37
[md]我重新打了一个包，楼主可以试试

Zustand

大佬你好 这个是使用zustand@4.4.1的部分代码（微信读书），都是使用vanilla.createStore()方法创建了一个存储器对象，并使用一系列中间件对其进行处理，但我不明白如何使用，所以在网上搜索以上代码 出现好像加载不到Zustand库，用了大佬的Zustand.js的确可以加载，但我仍无法了解zustand@4.4.1使用方法，请大佬根据// @require      https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.production.js 实现部分功能，我好学习

// @require      https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.production.js
// @require      https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/middleware.production.js
  const scraperSessionStore = vanilla.createStore()(
    middleware.subscribeWithSelector(
      middleware.persist(() => scraperSessionInitialState, {
        name: "scraper-session-storage",
        storage: middleware.createJSONStorage(() => sessionStorage)
      })
    )
  );
const scraperGMStore = vanilla.createStore()(

    middleware.subscribeWithSelector(
      middleware.persist(() => scraperGMInitialState, {
        name: "scraper-gm-storage",
        storage: middleware.createJSONStorage(() => GMStorage),
        merge: (persistedState, currentState) => {
          return {
            ...currentState,
            ...persistedState,
            booleanOptions: currentState.booleanOptions.map(
              (currentBooleanOption) => {
                const persistedBooleanOption = persistedState.booleanOptions.find(
                  ({ name }) => name === currentBooleanOption.name
                );
                if (persistedBooleanOption) {
                  return persistedBooleanOption;
                }
                return currentBooleanOption;
              }
            )
          };
        }
      })
    )
  );
  const scraperPageStore = vanilla.createStore()(
    middleware.subscribeWithSelector(() => scraperPageInitialState)
  );

王一之

我不了解这个库啊。。。也没有使用场景

哥哥要学习的话，最好还是去看他的官方文档吧

王一之

王一之 发表于 2023-10-27 10:37
[md]我重新打了一个包，楼主可以试试

Zustand

重新打包主要是这里依赖了其它的包

useSyncExternalStoreExports

感觉还有其它更优雅的办法去解决

----

找了一下，https://cdn.jsdelivr.net/npm/use-sync-external-store@1.2.0/好像没有提供umd的包

李恒道

顺便来一嘴
状态库我还是更喜欢redux....