vite+vue3 + ts 项目搭建——pinia

内容拆分2
之前写过vuex的文章，想用vuex的戳这：链接

2. 状态管理:pinia

1. 官网：链接

2. 安装： npm install pinia

3. 注册：

   //main.ts
   import { createApp } from 'vue'
   import './style.css'
   import App from './App.vue'
   import { pinia } from '/@/store'
   createApp(App)
   .use(pinia)
   .mount('#app')
   1
   2
   3
   4
   5
   6
   7
   8

4. 配置:

   • 在src文件夹下创建store文件夹，创建index.ts作为入口，创建modules文件夹为模块文件，创建模块文件(layout.ts)
     

     //store/index.ts
     import { createPinia } from "pinia";
     export const pinia = createPinia();
     1
     2
     3

     //store/modules/layout.ts
     import { defineStore } from 'pinia'
     import { ILayout, IUserInfo } from '/@/type/store/layout'
     
     export const useLayoutStore = defineStore({
         id: 'layout',
         state: ():ILayout => ({
             // 用户信息
             userInfo: {
                 name: '',
                 role: []
             },
         }),
         getters: {
             getUserInfo():IUserInfo {
                 return this.userInfo
             },
         },
         actions: {}
     })	
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20

   • 定义参数类型信息接口：创建一个对应的src/type/store/layout.ts(一层层自己创建)来放置当前文件的
     

      // 用户信息
      export interface IUserInfo {
        name: string,
        role: string[]
      }
      // state
      export interface ILayout {
        // 用户信息
        userInfo: IUserInfo
      }
     
     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11

   5.使用:

   <script lang="ts">
   	import { defineComponent, ref } from 'vue'
   	import { useLayoutStore } from '/@/store/modules/layout'
   	export default defineComponent({
   	    name: 'Directive',
   	    setup() {
   	        const { getUserInfo } = useLayoutStore()
   	        const username = ref(getUserInfo.name)
   	        return {
   	            username,
   	        }
   	    }
   	})
   </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

搞定，回去继续搭！