'pinia'

package.json

@@ -14,6 +14,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "^2.8.6",
     "mitt": "^3.0.1",
+    "pinia": "^2.2.5",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       mitt:
         specifier: ^3.0.1
         version: 3.0.1
+      pinia:
+        specifier: ^2.2.5
+        version: 2.2.5(typescript@5.4.5)(vue@3.5.12(typescript@5.4.5))
       vue:
         specifier: ^3.4.29
         version: 3.5.12(typescript@5.4.5)
@@ -548,6 +551,18 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
+  pinia@2.2.5:
+    resolution: {integrity: sha512-T4PEQ4uFv2KIRC8A1Y3k1ceQGTDtxtd7nngYGu1IJUUSpuQoYfGq7w7rOc+f5YN1vx3mEs2NjjtN2IFbNS7jqA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.5.11
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+
   postcss@8.4.47:
     resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1087,6 +1102,14 @@ snapshots:
 
   pidtree@0.6.0: {}
 
+  pinia@2.2.5(typescript@5.4.5)(vue@3.5.12(typescript@5.4.5)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.12(typescript@5.4.5)
+      vue-demi: 0.14.10(vue@3.5.12(typescript@5.4.5))
+    optionalDependencies:
+      typescript: 5.4.5
+
   postcss@8.4.47:
     dependencies:
       nanoid: 3.3.7

src/App.vue

@@ -2,7 +2,7 @@
   <index/>
 </template>
 <script setup lang="ts">
-import Index from "@/views/calendar/index.vue";
+import Index from "@/views/pinia/index.vue";
 </script>
 <style scoped>
 

src/main.ts

@@ -6,6 +6,9 @@ import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import App from './App.vue'
 import router from './router'
+import { createPinia } from 'pinia'
+//引入仓库
+import store from './store'
 
 const app = createApp(App)
 app.use(ElementPlus)
@@ -13,4 +16,6 @@ app.use(router)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
+app.use(createPinia())
+app.use(store)
 app.mount('#app')

src/store/index.ts

@@ -0,0 +1,5 @@
+//创建大仓库
+import {createPinia} from "pinia";
+let store = createPinia();
+//createPinia方法可以用于创建大仓库
+export default store;

src/store/modules/info.ts

@@ -0,0 +1,32 @@
+//定义info小仓库,defineStore用于小仓库
+import {defineStore} from "pinia";
+//第一个仓库:小仓库名字 第二个参数:小仓库配置对象
+//defineStroe方法执行会返回一个函数，函数作用就是让组件可以获取到仓库数据
+let useInfoStore = defineStore('info',{
+    //存储数据：state
+    state:()=>{
+        return{
+            count:99,
+            arr:[1,2,3,4,5,6,7,8,9,10]
+        }
+    },
+    //操作方法actions
+    actions:{
+        // 注意:函数没有context上下文对象
+        // 没有commit、没有mutations去修改数据
+        updateNum(a:number,b:number){
+            this.count += a;
+        }
+    },
+    //计算属性getters
+    getters:{
+        total(){
+            let result = this.arr.reduce((prev:number,next:number)=>{
+                return prev + next
+            },0);
+            return result;
+        }
+    },
+
+});
+export default useInfoStore;

src/views/pinia/component/child-A.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="box1">
+    <h1>{{infoStore.count}}-------{{infoStore.total}}</h1>
+    <el-button type="primary" @click="updateCount">点我修改仓库数据</el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useInfoStore from "@/store/modules/info";
+//获取小仓库对象
+let infoStore = useInfoStore();
+
+const updateCount = ()=>{
+  // infoStore.count ++
+
+  //$patch方法
+  // infoStore.$patch({
+  //   count:111
+  // })
+  infoStore.updateNum(10,100)
+  console.log(infoStore,'========infoStore信息')
+}
+</script>
+
+<style scoped>
+.box1{
+  width: 300px;
+  height: 200px;
+  background: darkorange;
+}
+</style>

src/views/pinia/component/child-B.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="box2">
+    <h1>{{useInfo.count}}+++++++{{useInfo.total}}</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useInfoStore from "@/store/modules/info";
+let useInfo = useInfoStore();
+
+</script>
+
+<style scoped>
+.box2{
+  width: 300px;
+  height: 200px;
+  background: lightgoldenrodyellow;
+}
+</style>

src/views/pinia/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="box">
+    <h2>pinia</h2>
+    <hr>
+    <div class="container">
+      <child-a></child-a>
+      <child-b></child-b>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ChildA from "@/views/pinia/component/child-A.vue";
+import ChildB from "@/views/pinia/component/child-B.vue";
+// vuex:集中式管理状态容器,可以实现任意组件之间通信!!!
+// 核心概念:state、mutations、actions、getters、modules
+// pinia:集中式管理状态容器,可以实现任意组件之间通信!!!
+// 核心概念:state、actions、getters
+// pinia写法:选择器API、组合式API
+</script>
+
+<style scoped>
+.box{
+  width: 600px;
+  height: 300px;
+  background: powderblue;
+}
+.container{
+  display: flex;
+}
+</style>

src/views/provide-inject/component/grandson.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="box2">
+    <h2>grandson</h2>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+.box2{
+  width: 100px;
+  height: 200px;
+  background: darkseagreen;
+}
+</style>

src/views/provide-inject/component/son.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="box1">
+    <h2>son</h2>
+    <hr>
+    <p>{{carName}}</p>
+    <el-button type="success" @click="updateCar">更新数据</el-button>
+    <grandson></grandson>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref,inject} from "vue";
+import Grandson from "@/views/provide-inject/component/grandson.vue";
+let carName = ref(inject('TOKEN').value)
+// console.log(carName,'获取的inject数据')
+const updateCar = ()=>{
+  carName.value = 'passt'
+}
+</script>
+
+<style scoped>
+.box1{
+  width: 200px;
+  height: 300px;
+  background: #f2f2f2;
+}
+</style>

src/views/provide-inject/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="box">
+    <h1>provide和inject</h1>
+    <hr>
+    <son></son>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Son from "@/views/provide-inject/component/son.vue";
+//vue3提供provide(提供)与inject(注入),可以实现隔辈组件传递数据
+import {ref,provide} from "vue";
+let car = ref('HORCH')
+//祖先组件给后代组件提供数据
+// 两个参数:第一个参数就是提供的数据key
+// 第二个参数:祖先组件提供数据
+provide("TOKEN",car);
+</script>
+
+<style scoped>
+.box{
+  width: 60vw;
+  height: 600px;
+  background:powderblue ;
+}
+</style>