zustand开发文档

tansuo · 发表于 2023-10-28 15:10:16

本帖最后由 tansuo 于 2023-10-28 17:53 编辑

本帖最后由 tansuo 于 2023-10-28 15:38 编辑

本帖最后由 tansuo 于 2023-10-28 15:20 编辑

请帮助我找找这个https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.development.js和https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/middleware.production.js开发文档，中文文档更好，官网应该没提供中文文档，但官网比较全，https://www.jsdelivr.com/package/npm/zustand 好像不全，下面两个代码报各种错误

tansuo · 发表于 2023-10-28 15:31:36

本帖最后由 tansuo 于 2023-10-28 15:36 编辑

<!DOCTYPE html>
<html>
  <head>
<meta charset="UTF-8">
<title>使用zustand库的示例</title>
<script src="https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.development.js"></script>

  </head>
  <body>
<div id="app"></div>
<script>
   const { create } = zustandVanilla;

   const App = () => {
      const useStore = create((set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      }));

      const store = useStore();

      return `
      <div>
         <h1>使用zustand库的示例</h1>
         <p>当前计数：${store.count}</p>
         <button>增加</button>
      </div>
      `;
   };

   const handleIncrement = () => {
      const useStore = create((set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      }));
      const store = useStore();
      store.increment();
      render(App);
   };

   const render = (component) => {
      document.getElementById('app').innerHTML = component();
   };

   render(App);
</script>
  </body>
</html>

tansuo · 发表于 2023-10-28 15:34:25

本帖最后由 tansuo 于 2023-10-28 15:37 编辑

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zustand Example</title>
</head>
<body>
  <h1>Count: <span id="count"></span></h1>
  <button id="incrementBtn">Increment</button>
  <button id="decrementBtn">Decrement</button>

  <script src=" https://fastly.jsdelivr.net/npm/zustand@4.4.1/"></script>
  <script src="https://cdn.jsdelivr.net/npm/zustand@4.4.1"></script>
  <script>
const createStore = zustand.default;
const { applyMiddleware } = zustand;

const initialState = {
   count: 0,
};

const increment = () => store.setState((state) => ({ count: state.count + 1 }));
const decrement = () => store.setState((state) => ({ count: state.count - 1 }));

const middleware = (set) => (get) => (api) => (fn) => fn(set, get, api);
const useStore = createStore(
   applyMiddleware(middleware),
   (set) => ({
      ...initialState,
      increment,
      decrement,
   })
);

const countElement = document.getElementById('count');
const incrementBtn = document.getElementById('incrementBtn');
const decrementBtn = document.getElementById('decrementBtn');

const store = useStore();

store.subscribe((state) => {
   countElement.textContent = state.count;
});

incrementBtn.addEventListener('click', () => {
   store.increment();
});

decrementBtn.addEventListener('click', () => {
   store.decrement();
});
  </script>
</body>
</html>

李恒道 · 发表于 2023-10-28 15:52:03

这跟昨天的问题一样...
这种小库不用看文档的，直接读源代码就可以了

李恒道 · 发表于 2023-10-28 16:01:38

第一个代码的问题是你用的是vanilla而贴的是zustand的代码

李恒道 · 发表于 2023-10-28 16:09:37

第二个问题我更倾向于你要使用打包工具重新打包
require引入错误，一般来说需要重新打包出来umd格式使用
当然使用提供require库的方式理论应该也行
但是兼容性会出很大问题而且操作复杂
兼容性很难保障
因为官方没说这部分

tansuo · 发表于 2023-10-28 16:31:07

李恒道发表于 2023-10-28 16:01
第一个代码的问题是你用的是vanilla而贴的是zustand的代码

这样写有问题吗？大佬不过还是报错 <!DOCTYPE html>
<html>
  <head>
<meta charset="UTF-8">
<title>使用zustand库的示例</title>
<script src="https://cdn.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.development.js"></script>
  </head>
  <body>
<div id="app"></div>
<script>
   const create = this.zustandVanilla.createStore;;

   const useStore = create((set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
   }));

   const App = () => {
      const store = useStore();

      return `
      <div>
         <h1>使用zustand库的示例</h1>
         <p>当前计数：${store.count}</p>
         <button onclick="handleIncrement()">增加</button>
      </div>
      `;
   };

   const handleIncrement = () => {
      const store = useStore();
      store.increment();
      render(App);
   };

   const render = (component) => {
      document.getElementById('app').innerHTML = component();
   };

   render(App);
</script>
  </body>
</html>

tansuo · 发表于 2023-10-28 16:34:34

本帖最后由 tansuo 于 2023-10-28 18:30 编辑

李恒道发表于 2023-10-28 16:09
第二个问题我更倾向于你要使用打包工具重新打包
require引入错误，一般来说需要重新打包出来umd格式使用
当 ...

第二个代码这样应用可以吗？但还是报错

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zustand Example</title>
</head>
<body>
  <h1>Count: <span id="count"></span></h1>
  <button id="incrementBtn">Increment</button>
  <button id="decrementBtn">Decrement</button>
  <script src="https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/vanilla.development.js"></script>
  <script src="https://fastly.jsdelivr.net/npm/zustand@4.4.1/umd/middleware.production.js"></script>

  <script>
const create = this.zustandVanilla.createStore;

const initialState = {
   count: 0,
};

const increment = () => store.setState((state) => ({ count: state.count + 1 }));
const decrement = () => store.setState((state) => ({ count: state.count - 1 }));

const middleware = (set) => (get) => (api) => (fn) => fn(set, get, api);
const useStore = create(
   middleware,
   (set) => ({
      ...initialState,
      increment,
      decrement,
   })
);

const countElement = document.getElementById('count');
const incrementBtn = document.getElementById('incrementBtn');
const decrementBtn = document.getElementById('decrementBtn');

const store = useStore();

store.subscribe((state) => {
   countElement.textContent = state.count;
});

incrementBtn.addEventListener('click', () => {
   store.increment();
});

decrementBtn.addEventListener('click', () => {
   store.decrement();
});
  </script>
</body>
</html>

李恒道 · 发表于 2023-10-29 03:02:03

tansuo 发表于 2023-10-28 16:34
第二个代码这样应用可以吗？但还是报错

只接受第一个middaren导致的
你应该用错库了
跟我上边说的第一个问题貌似是一个原理

还是尝试先自己打包一份吧

李恒道 · 发表于 2023-10-29 03:03:16

tansuo 发表于 2023-10-28 16:34
第二个代码这样应用可以吗？但还是报错

vanilla跟zustand的本库好像是两个东西

zustand开发文档

发表回复

油中3周年

荣誉开发者

喜迎中秋

油中2周年

生态建设者