diff --git a/package.json b/package.json
index aa1c7deb0adb6e6aea5a1380426189ac24eee7a7..24f742336655ecd252846ebfcd8b18d32e90cfc2 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,9 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "@vueuse/core": "^10.1.2",
     "guess": "^1.0.2",
+    "pinia": "^2.0.0-rc.10",
     "vue": "^3.2.37"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..40fdb192a68b273c7fd961bc6c0025bf99cfdd66 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,8 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
+
 
 <template>
   <header>
+    22232323
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
@@ -16,7 +14,29 @@ import TheWelcome from './components/TheWelcome.vue'
     <TheWelcome />
   </main>
 </template>
-
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+import { ref, onMounted } from 'vue'
+onMounted(() => {
+  let arr = [4, 2, 8, 1, 5];
+  console.log(bubbleSort(arr)); // [1, 2, 4, 5, 8]
+  function bubbleSort(arr) {
+    var len = arr.length;
+    for (var i = 0; i < len - 1; i++) {
+      for (var j = 0; j < len - 1 - i; j++) {
+        if (arr[j] > arr[j + 1]) {
+          var temp = arr[j];
+          arr[j] = arr[j + 1];
+          arr[j + 1] = temp;
+        }
+      }
+    }
+    return arr;
+  }
+  bubbleSort()
+})
+</script>
 <style scoped>
 header {
   line-height: 1.5;
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1b8faac1521345513353e96050dd24d94610d432..d1e45e58b104d7b9cfec73a6355bedb9ed5f448d 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,23 +1,37 @@
-<script setup>
+
+
+<template>
+  <div class="greetings">
+    222
+     Count:{{  count}}
+     <button @click="increment">Increment</button>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from 'pinia'
 defineProps({
   msg: {
     type: String,
     required: true
   }
 })
-</script>
 
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
-      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
-    </h3>
-  </div>
-</template>
+export default defineComponent({
+  setup(){
+    const store = useStore();
+    const count = store.count;
+    const increment = () =>{
+      store.count++;
+    };
+    return {
+      count,
+      increment
+    }
+  }
+})
 
+</script>
 <style scoped>
 h1 {
   font-weight: 500;
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
index d3d2e7acc8a9deeb26e48169ee3cbc64d2b54f2f..6ee22d8019bffd43151df0febd5ea3f3a53f4503 100644
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -1,10 +1,34 @@
 <script setup>
+import { ref, onMounted } from 'vue'
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'
 import EcosystemIcon from './icons/IconEcosystem.vue'
 import CommunityIcon from './icons/IconCommunity.vue'
 import SupportIcon from './icons/IconSupport.vue'
+
+
+
+onMounted(() => {
+  let arr = [4, 2, 8, 1, 5];
+  console.log(bubbleSort(arr)); // [1, 2, 4, 5, 8]
+  function bubbleSort(arr) {
+    var len = arr.length;
+    for (var i = 0; i < len - 1; i++) {
+      for (var j = 0; j < len - 1 - i; j++) {
+        if (arr[j] > arr[j + 1]) {
+          var temp = arr[j];
+          arr[j] = arr[j + 1];
+          arr[j + 1] = temp;
+        }
+      }
+    }
+    return arr;
+  }
+  bubbleSort()
+})
+
+
 </script>
 
 <template>
@@ -31,9 +55,7 @@ import SupportIcon from './icons/IconSupport.vue'
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
     your components and web pages, check out
     <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank"
-      >Cypress Component Testing</a
-    >.
+    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
 
     <br />
 
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd302fc07ceae0814271c702415158905686793e
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,4 @@
+import { createPinia } from "pinia";
+const pinia = createPinia();
+
+export default pinia
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 90e6400b4d8ad8aba0c1caa53874eb4b81380648..f7adc1e21d7f03f1984043419d1bbc8b2c0131f4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
+import pinia from './index'
 import './assets/main.css'
 
-createApp(App).mount('#app')
+const app = createApp(App);
+app.use(pinia)
+app.mount('#app')
+
+