油猴脚本使用Zustand-油猴中文网 - Powered by Discuz! Archiver

tansuo 发表于 2023-10-27 09:26:02

油猴脚本使用Zustand

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

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

```js
// ==UserScript==
// @name       My Greasemonkey Script
// @namespace http://your-namespace.example/
// @version    1.0
// @descriptionExample 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}`);
})();
```

李恒道 发表于 2023-10-27 09:26:03

善读论坛指南
```js
(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
导出有
```js
exports.createStore = createStore;
exports.default = vanilla;
Object.defineProperty(exports, '__esModule', { value: true });
```
应该拿createStore方法
this.zustandVanilla.createStore才是create的函数
完整代码
```js
// ==UserScript==
// @name       My Greasemonkey Script
// @namespace http://your-namespace.example/
// @version    1.0
// @descriptionExample 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/

王一之 发表于 2023-10-27 09:45:10

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

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

zustandVanilla

tansuo 发表于 2023-10-27 09:53:28

如何解决那，大佬

tansuo 发表于 2023-10-27 09:54:29

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

fastly.jsdelivr.net/npm ...

如何解决，大佬

王一之 发表于 2023-10-27 10:37:29

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

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

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

```js
// ==UserScript==
// @name       My Greasemonkey Script
// @namespace http://your-namespace.example/
// @version    1.0
// @descriptionExample 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 11:39:32

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

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 11:51:57

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

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

王一之 发表于 2023-10-27 11:59:20

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

Zustand

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

useSyncExternalStoreExports

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

----

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

李恒道 发表于 2023-10-27 13:00:36

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

页: [1] 2

油猴中文网's Archiver

油猴脚本使用Zustand