Pinia使用

官方：简介 | Pinia

npm install pinia

//main.js

//pinia管理
import { createPinia } from 'pinia'
const pinia = createPinia() //用一个变量接收这个方法的返回

stores文件夹下

//导入一个方法 defineStore
import { defineStore } from "pinia";
import { ref } from "vue";

//这个变量本身就是一个方法，组件要调用才能获得一个真的实例对象
export const useCounterStore = defineStore('counter',()=>{
  // 定义数据 (state)
  const count = ref(0)
  // 定义修改数据的方法(action 同步+异步)
  const increment = ()=>{
    count.value++
  }
  //以对象的方式return供组件使用
  return{
    count,
    increment
  }
})

App文件

<script setup>
// 1.导入use打头的方法
import { useCounterStore } from './stores/counter';
// 2.执行方法得到store实例对象
const counterStore  = useCounterStore()
console.log(counterStore);
</script>

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

---

Pinia异步

count.js如下：

//导入一个方法 defineStore
import { defineStore } from "pinia";
import { computed, ref } from "vue";
import axios from "axios";
const API_URL = 'http://geek.itheima.net/v1_0/channels'
//这个变量本身就是一个方法，组件要调用才能获得一个真的实例对象
export const useCounterStore = defineStore('counter',()=>{
  // 定义数据 (state)
  const count = ref(0)
  // 定义修改数据的方法(action 同步+异步)
  const increment = ()=>{
    count.value++
  }

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

    //异步action

    const list = ref([])
    const getList = async ()=>{
      const res = await axios.get(API_URL)
      list.value = res.data.data.channels
    }
    
    //storeToRefs函数可以辅助保持数据（state+getter）的响应式解构

  //以对象的方式return供组件使用
  return{
    count,
    increment,
    doubleCount,
    list,
    getList
  }
})

App.js如下：

<script setup>
// 1.导入use打头的方法
import { onMounted } from 'vue';
import { useCounterStore } from './stores/counter';

// 2.执行方法得到store实例对象
const counterStore  = useCounterStore()
console.log(counterStore);



//触发action
onMounted(()=>{
  counterStore.getList()
})

</script>

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

  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

 

---

 

App文件： 

storeToRef函数(控制台给出的是方法对象，所以就不会丢失数据)

！但是，这个函数只负责数据相关的处理

！！方法直接从原来的countStore中解构赋值

const { increment } = counterStore

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

  {{ doubleCount }}

变成

  <button @click="increment">{{ count }}</button>

  {{ doubleCount }}

<script setup>
// 1.导入use打头的方法
import { onMounted } from 'vue';
import { useCounterStore } from './stores/counter';
import { storeToRefs } from 'pinia';
// 2.执行方法得到store实例对象
const counterStore  = useCounterStore()
console.log(counterStore);

// 直接解构赋值（响应式丢失）
// const {count,doubleCount } = counterStore

//方法包裹(保持响应式更新)
const {count,doubleCount } = storeToRefs(counterStore)
console.log(count,doubleCount);

//触发action
onMounted(()=>{
  counterStore.getList()
})

</script>

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

  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

 

 

<script setup>
// 1.导入use打头的方法
import { onMounted } from 'vue';
import { useCounterStore } from './stores/counter';
import { storeToRefs } from 'pinia';
// 2.执行方法得到store实例对象
const counterStore  = useCounterStore()
console.log(counterStore);

// 直接解构赋值（响应式丢失）
// const {count,doubleCount } = counterStore

//方法包裹(保持响应式更新)
const {count,doubleCount } = storeToRefs(counterStore)
console.log(count,doubleCount);

//方法直接从原来的countStore中解构赋值
const { increment } = counterStore


//触发action
onMounted(()=>{
  counterStore.getList()
})

</script>

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

  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>