其他前端状态管理工具整理
https://www.yuque.com/wuzhao/kb/xb192z

pinia读写

https://pinia.esm.dev/core-concepts/state.html#accessing-the-state
pinia 不用像vuex一样异步请求需要action—>mutation—>修改state；

可以通过 store 实例访问状态，直接读写状态

  1. const store = useStore()
  3. store.counter++

actions

Pinia 没有 Mutations，统一在 actions 中操作 state，通过this.xx 访问相应状态，虽然可以直接操作 Store，但还是推荐在 actions 中操作，保证状态不被意外改变，action 和普通的函数一样，action 同样可以像 Getter 一样访问其他的 Store，同上方式使用其它 Store。

  1. export const useStore({
  2.   state: ()=> ({
  3.     count: 2,
  4.     // ...
  5.   })
  6.   // ...
  7.   actinos: {
  8.     countPlusOne() {
  9.       this.count++;
  10.     },
  11.     countPlus(num) {
  12.       this.count += num;
  13.     }
  14.   }
  15. })
  18. import { useStore } from "../store/store";
  19. // ...
  20. function addByActions() {
  21.   store.countPlus(100);
  22. }

pinia目录

store可以散落在各个文件夹内

只要是useStore引入对应的store就好

  1. <template>
  2.   <div>test inner pinia</div>
  3.   <div>count：{{ store.name }}</div>
  4. </template>
  5. <script lang="ts">
  6. import { useStore } from "./store";
  7. export default {
  8.   setup() {
  9.     const store = useStore();
  10.     return {
  11.       store,
  12.     };
  13.   },
  14. };
  15. </script>

pinia

  • pinia可以直接访问修改state，没有vuex的mutation，也不需要必须走pinia的action修改数据，可以直接修改state
  • pinia可以放在任何store里，可以更好的组织代码

https://github.com/withwz/testPinia