feat[ptr]: pinia 的两种风格设置仓库

Author: ceilf6

Vue3/sandboxs-vite/src/main.js

@@ -21,4 +21,8 @@ const app = createApp(App)
 import router from './router'
 app.use(router) // 使用插件
 
+import { createPinia } from 'pinia'
+const pinia = createPinia()
+app.use(pinia)
+
 app.mount('#app')

Vue3/sandboxs-vite/src/store/useCounterStore.js

@@ -0,0 +1,37 @@
+// 仓库文件
+import { defineStore } from "pinia";
+import delay from "../utils/delay";
+
+// 第二个参数支持两种风格：options api 以及 composition api
+export const useCounterStore = defineStore("counter", {
+    // 目前是 选项式API 风格
+    state: () => {
+        return {
+            num: 0,
+        };
+    },
+    getters: {
+        // 类似于 计算属性
+        // 针对上面 state 的数据做一个二次计算
+        doubleNum: (state) => state.num * 2,
+    },
+    actions: {
+        // 同步方法
+        increment() {
+            this.num++;
+        },
+        decrement() {
+            this.num--;
+        },
+        // 异步方法
+        async asyncIncrement() {
+            await delay(1000)
+            this.increment();
+        },
+        async asyncDecrement() {
+            await delay(1000)
+            this.decrement();
+        },
+    },
+});
+

Vue3/sandboxs-vite/src/store/useTodoListStore.js

@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+import { reactive } from 'vue'
+
+export const useTodoListStore = defineStore('list',
+    // 组合式 风格
+    () => {
+        const list = reactive({
+            items: [
+                {
+                    text: "学习Pinia",
+                    isCompleted: false
+                },
+                {
+                    text: "任务2",
+                    isCompleted: true
+                }
+            ]
+        })
+
+        function addItem(newItemStr) {
+            list.items.push({
+                text: newItemStr,
+                isCompleted: false
+            })
+        }
+
+        return { list, addItem }
+    }
+)

Vue3/sandboxs-vite/src/test/pinia-test/Counter.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="container">
+    <!-- <button class="plus" @click="num++">+</button> -->
+    <!-- 不推荐直接操控数据，而是应该用仓库暴露的操控方法 -->
+    <button class="plus" @click="increment">+</button>
+
+    <div class="num">{{ num }}</div>
+    <button class="reduce" @click="decrement">-</button>
+    <div class="doubleNum">{{ doubleNum }}</div>
+
+    <button class="asyncIncrement" @click="asyncIncrement">异步增加</button>
+    <button class="asyncDecrement" @click="asyncDecrement">异步减少</button>
+
+    <button class="reset" @click="store.$reset">重置</button>
+    <!-- 仓库实例属性 $reset 实现重置仓库状态 -->
+
+    <input type="text" v-model="newNum" />
+    <button class="bind" @click="handleBind">绑定</button>
+  </div>
+</template>
+
+<script setup>
+import { useCounterStore } from "../../store/useCounterStore.js";
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
+const store = useCounterStore();
+
+// 解构数据
+const { num, doubleNum } = storeToRefs(store);
+// 如果不用 storeToRefs 仓库中的数据 breaks reactivity 不是响应式的
+
+// 解构方法
+const { increment, decrement, asyncIncrement, asyncDecrement } = store;
+
+const newNum = ref(""); // 用于和输入框做双向绑定
+
+function handleBind() {
+  store.$patch({
+    // 仓库实例属性 $patch 可以用于变更仓库状态
+    num: ~~newNum.value,
+    // ~~ 用于快速转为32位整数
+  });
+  newNum.value = "";
+}
+</script>
+
+<style scoped></style>

Vue3/sandboxs-vite/src/test/pinia-test/TodoList.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="container">
+    <div class="add">
+      <input type="text" v-model="newItem" />
+      <button @click="handleAdd">添加</button>
+    </div>
+
+    <div class="curList">
+      <div v-for="(item, idx) in list.items" :key="idx">
+        <div>{{ item.text }} {{ item.isCompleted ? "完成" : "未完成" }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from "pinia";
+import { useTodoListStore } from "../../store/useTodoListStore";
+const store = useTodoListStore();
+const { list } = storeToRefs(store);
+const { addItem } = store;
+
+import { ref } from "vue";
+const newItem = ref("");
+function handleAdd() {
+  if (!newItem.value) return;
+  //   list.value.items.push({
+  //     // list 是 ref 得取一层 value
+  //     text: newItem.value,
+  //     isCompleted: false,
+  //   });
+  addItem(newItem.value); // 别忘记对 ref 取 value
+  newItem.value = "";
+}
+</script>

Vue3/sandboxs-vite/src/test/pinia-test/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <Counter></Counter>
+    <TodoList></TodoList>
+  </div>
+</template>
+
+<script>
+import Counter from "./Counter.vue";
+import TodoList from "./TodoList.vue";
+
+export default {
+  components: {
+    Counter,
+    TodoList,
+  },
+};
+</script>