Pinia 计数器

新增stores目录

在stores目录里面新增一个counter.js 文件

文件代码：

import { defineStore } from 'pinia

export const useCounterStore = defineStore('counter',{
  state:()=>{
     return { count:0 }
    
  },
  //也可以这样定义
  //state:() => ({ count : 0})
  actions: {

    increment() {
    
       this.count++
    }

 }

})

在组件中使用

import { useCounterStore } from '@stores/counter'

export default {
   setup() {
     const counter = useCounterStore() //初始化 counter对象
     counter.count++
     //带有自动补全
     counter.$patch({ count : counter.count+1 })
     //或者用action代替
     counter.increment()


  }

}

或者更高级的定义store

//定义store
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useCounterStore = defineStore ('counter',()=>{
    
   //数据(state)
   const count = ref(0)
   
   //修改数据的方法 (action)
   const increment = () =>{
      count.value++

   }

   //以对象形式返回
   return {count . increment}

})

然后在组件里使用Store

<script setup>

//1.导入'useCounterStore' 方法
import { useCounterStore } from '@/stores/counter'
//2.执行方法得到counterStore对象
const counterStore = useCounterStore()

</script>

<template>
  <button @click = "counterStore.increment">
     {{ counterStore.count }}

  </button>

</template>

总结：

1、定义store （使用导入的useCounterStore）

2、组件中使用

在vuex中getters为计算属性

getters在pinia中实现，直接使用computed函数进行模拟

// 数据 (state)
const count = ref(0)

//getter
const doubleCount = computed(() => count.value * 2)

在state里面加入getter

//定义store
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useCounterStore = defineStore ('counter',()=>{
    
   //数据(state)
   const count = ref(0)
   
   //修改数据的方法 (action) 同步+异步
   const increment = () =>{
      count.value++
      
   }
   
   //getter定义
   const doubleCount = computed(() => count.value*2)


   //以对象形式返回 供组件使用
   return {count,
           increment,
           doubleCount  //在return 对象里加入

    }

})

<script setup>

//1.导入 use 打头的方法

import { useCounterStore } from '@/store/counter'

//2.执行方法得到store实例对象

const counterStore  = useCounterStore()

console.log(counterStore)

</script>

<template>

  <button @click = "counterStore.increment"> {{counterStore.count}} </button>
  {{ counterStore.doubleCount }}
</template>

异步action

//定义异步 action

 const list = ref([])

const getlist = async ()=>{

   const res = await axios.get(API_URL)

}

同理要在return 里返回

//定义store
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useCounterStore = defineStore ('counter',()=>{
    
   //数据(state)
   const count = ref(0)
   
   //修改数据的方法 (action) 同步+异步
   const increment = () =>{
      count.value++
      
   }

   //定义异步 action

   const list = ref([])

   const getList = async ()=>{

      const res = await axios.get(API_URL)

   }   

   //getter定义
   const doubleCount = computed(() => count.value*2)


   //以对象形式返回 供组件使用
   return {count,
           increment,
           doubleCount,  //在return 对象里加入
           getList
           
    }

})

不用对象+.的形式取 用解构赋值

但是一般的解构赋值会丢失响应式 那么应该怎么办呢

import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore


//然后用这个方法包裹一下(保持响应式更新)

const {count , doubleCount} = storeToRefs(counterStore)

包裹后产出的是两个ref对象，而不是解构的值

那么方法能不能解构赋值 （响应式） 方法要用一般解构赋值的写法才可以 不能用storeToRefs方法包裹

Pinia调试

总结：

1、Pinia 是用来做什么的？

集中状态管理工具，新一代的vuex

2、Pinia中还需要mutation吗？

不需要，action既支持同步也支持异步

3、Pinia如何实现getter

computed计算属性函数

4、Pinia产生的Store如何解构赋值数据保持响应式？

storeToRefs