Pinia 二、Store、state、actions、getters

一、 定义store

步骤:

• src文件夹内新建 Store 文件夹
• Store 文件夹内新建命名文件 ： [name]
• Store 文件夹内新建文件： index.ts

defineStore

//index.js
import { defineStore } from 'pinia'

export const useAlertsStore = defineStore('name', {
  // 其他配置...
})

• Store 是用 defineStore() 定义的

• 命名习惯：将返回的函数命名为 use…

• Pinia 将用它来连接 store 和 devtools

• 参数一：

  • 必填
  • 被用作 id ，是一个独一无二的名字；
    • 为确保唯一性，可将它抽离出去；state-name.ts文件中单独定义，再引入store内

      //state-name.ts
      export const enum Names {
          Test = 'TEST'
      }
      //store 引入
      import { defineStore } from 'pinia'
      import { Names } from './store-namespace'
       
      export const useTestStore = defineStore(Names.Test, {
       
      })
      

• 参数二： 可接受两类值：Setup 函数或 Option 对象

  • Option ： 传入一个带有 state、actions 与 getters 属性的 Option 对象
    • state: store 的数据 (data)
    • getters: 是 store 的计算属性 (computed)
    • actions 则是方法 (methods)

     //数据  store index.js
      	import { defineStore } from 'pinia'
      	import { Names } from './store-namespace'
      	 
      	export const useTestStore = defineStore(Names.Test, {
      	    //数据
      	    state:() => ({
                  current:1,
                  name:"哈哈"
      	    }),
      	    //计算属性(computed) 修饰一些值
      	    getters:{
      	
      	    },
      	    //方法(method) 支持同步 、异步 提交state
      	    actions: {
      	        
      	    },
         })
         
     // 使用 例如：App.vue
     <template>
       <div>{{Test.current}}--{{Test.name }} </div>
     </template>
     <script setup lang='ts'>
         import { useTestStore } from "./store"
         const Test = useTestStore()
    
     </script>
    
    

  二、state

  允许修改值

  //组件内
     <template>
         <div>{{Test.current}}--{{Test.name }} </div>
        <button @click="change">piniaChange</button>
      </template>
      <script setup lang='ts'>
           import { useTestStore } from "./store"
           const Test = useTestStore()
           const change = () => {
    	         //方式一：直接修改
    	             // Test.current +
    	        //方式二：$patch方法可以批量修改多个值
    	             //Test.$patch({
    				  //   current:888,
    				  //   name:"鸳鸯奶茶"
    				  // })
    		   //方式三：批量修改函数形式，可以自定义修改逻辑
    				  // Test.$patch((state) => {
    				  //   state.current = 999
    				  //   state.name = '牛奶公司'
    				  // }) 
    		  //方案四：通过原始对象修改整个实例
    				//Test.$state = {
    				//       current:10,
    				//       name:"oo"
    				//  }    
    	     // 方案五：通过actions修改
    	        // Test.setCurrent()
          }
       </script>
      
      //action修改的方式需要在definedStore中定义对应的方法
       actions:{
         setCurrent () {
             this.current++
         }
       }
  

  三、解构store

  //组件内
     <template>
         <div>{{Test.current}}--{{Test.name }} </div>
        <button @click="change">piniaChange</button>
          <div>{{ current }}--{{ name  }} </div>
      </template>
      <script setup lang='ts'>
           import { useTestStore } from "./store"
           import { storeToRefs } from 'pinia'
           
           const Test = useTestStore()
           const { current, name } = storeToRefs(Test)
           
           const change = () => {
    	       current.value++
          }
       </script>
      
  
  

四、Actions

• Action 相当于组件中的 method
• 支持同步 、异步 提交state
• 异步:async、 await

  //同步直接调用
  //异步 结合async await 修饰
  //多个action互相调用
   actions: {
      setCurrent () {
            this.current++
        },
       async getUser() {
           const result = await userV ()
           this.user = result;
           this.setName(result.name)
       },
       setName (name:string) {
           this.name = name;
       }
   },
  
  

五、getters

• 完全等同于 store 的 state 的计算值
• 推荐使用箭头函数，并且它将接收 state 作为第一个参数
• 普通函数形式可以使用this
• getters 可以互相调用

      getters:{
         doubleCurrent: (state) => state.current * 2,
         newCurrent ():number | string {
            return ++this.current + this.newName
          },
         newName ():string {
             return `$-${this.name}`
         }
     }	
  
  //组件中使用
   <template>
     <div>{{Test.current}}--{{Test.name }} </div>
     <div>{{ Test.doubleCurrent }}</div>
       <div>{{ Test.newCurrent}}</div>
   </template>
   <script setup lang='ts'>
       import { useTestStore } from "./store"
       const Test = useTestStore()
   </script>
  

六、API

$reset

• 重置store到他的初始状态

$subscribe

• 只要有state 的变化就会走这个函数

$onAction

• 只要有actions被调用就会走这个函数