pinia基本使用(一)の简单使用

pinia的优点

1. 支持vue2、vue3
2. 抛弃了Mutations操作,只有state、getters和actions
3. 不需要嵌套模块,符合vue3的Composition API
4. 完整的TS支持
5. 代码更加简洁
6. 没有命名空间

基本使用

1. 安装
   npm install pinia || yarn add pinia

2. 在main.ts中挂载pinia实例

   import {createApp} from 'vue'
   // 引入createPinia 构造方法
   import {createPinia} from 'pinia'
   import App from './App.vue'
   // 调用createPinia方法创建pinia实例
   const pinia=createPinia()
   const app=createApp(App)
   // 通过app.use挂载到全局
   app.use(pinia).mount('#app')

3. 创建仓库
   (1) 通过pinia提供的defineStore函数创建
   (2) defineStore接收两个参数(仓库名称,配置项)
   (3) 创建实例后导出

   import { defineStore } from 'pinia'
   
   /**
     基本格式:
       state: 函数返回
       getters: 与vuex一致
       actions: 取消了上下文参数,通过this获取state和getters里的变量
   */
   export const mainStore = defineStore( 'main',{
     state:( )=>{
       return{
         count: 0
       }
     },
     getters:{
       doubleCount(state){
           return state.count*2
       }
     },
     actions:{
       changeCount( ){
           this.count +=2
       }
     }
   } )
   

4. 使用
   定义:在vue组件或ts文件中引入导出的仓库实例

   <script setup lang="ts">
   import { mainStore } from './store/index'
   const store = mainStore()
   </script>
   <template>
     /* 这里不同于vuex,不需要通过.[属性名]去获取   */
     <h1> {{store.count}} </h1>
     <h1> {{store.doubleCount}} </h1>
     <button @click="store.changeCount">改变</button>
   </template>