feat:pinia初探

src/main.ts

@@ -1,19 +1,18 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import {vuexStore, piniaStore} from './store'
 
 // 移动端适配
 import 'lib-flexible/flexible.js';
 
 // 引入全局样式
 import '@/assets/scss/index.scss';
+
 // 全局引入按需引入UI库 vant
 import { vantPlugins } from './plugins/vant.js'
 
-//全局组件
+//全局公共组件
  import components from './plugins/components.js';
 
-// import CustomHeader from 'components/CustomHeader/CustomHeader'
+createApp(App).use(vuexStore).use(piniaStore).use(router).use(vantPlugins).use(components).mount('#app')
-
-createApp(App).use(store).use(router).use(vantPlugins).use(components).mount('#app')

src/store/index.ts

@@ -1,9 +1,10 @@
 import { createStore } from "vuex";
+import { createPinia } from "pinia"
 
-const store = createStore({
+export const vuexStore = createStore({
     state: {  
         isLoading: false,
-        userNmae: ""
+        userName: ""
     },
     getters: {
     
@@ -14,7 +15,7 @@ const store = createStore({
         },
 
         getUserNmae(state,data) {
-            state.userNmae = data
+            state.userName = data
         }
        
     },
@@ -23,4 +24,6 @@ const store = createStore({
     },
     modules: {},
 });
-export default store;
+
+
+export const piniaStore = createPinia()

src/store/testPinia.ts

@@ -0,0 +1,27 @@
+import { ref } from 'vue'
+import { defineStore } from "pinia"
+export const usePiniaState = defineStore('pinia', ()=>{
+    const userName = ref('')
+    const getUserNmae = (data) => {
+        userName.value = data
+    }
+    return { userName, getUserNmae}
+})
+
+
+// export const usePiniaState = defineStore({
+//     id: 'textPinia',
+//     state: () => {
+//         return {
+//             userName: ''
+//         }
+//     },
+//     getters: {
+
+//     },
+//     actions: {
+//         getUserNmae(data) {
+//             this.userName = data
+//         }
+//     }
+// })

src/views/about/About.vue

@@ -1,15 +1,31 @@
 <script setup lang="ts">
 	import { computed } from 'vue'
 	import { useStore } from 'vuex'
+	import { storeToRefs  } from 'pinia'
+	import { usePiniaState } from '@/store/testPinia'
 
 	import logo from '@/assets/logo.png'
 
-	const store = useStore()
+	// vuex
+	// const vuexStore = useStore()
 
-	const  userName  = computed(() => store.state.userNmae)
+	// pinia
+	const piniaStore = usePiniaState()
+
+	// vuex
+	// const  userName  = computed(() => vuexStore.state.userNmae)
+
+	// 通过storeToRefs方法将存储在pinia里的数据解构出来，保持state响应性
+	const  { userName }  = storeToRefs(piniaStore)
+	const { getUserNmae } = piniaStore
+	
 
     const handleBtn = () =>{
-      store.commit('getUserNmae', '真乖，如果对您有帮助请在github上点个星星哦~')
+		// vuex
+		// vuexStore.commit('userName','真乖，如果对您有帮助请在github上点个星星哦~')
+
+		// pinia
+     	getUserNmae('真乖，如果对您有帮助请在github上点个星星哦~')
     }
 
 </script>