Pinia基本使用示例

1. 定义Store【src\stores\counter.ts】。
(1). 组合式API写法。

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

(2). 类似Vuex的写法。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state:()=>({count:0}), // 相当于 state:()=>{ return {count:0}; }。
  getters:{
    doubleCount:state=>state.count * 2,
  },
  actions:{
    increment(){
      this.count++;
    }
  }
})

2. 使用Store【src\views\ChildComponent.vue】。
(1). 组合式API写法。

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore();

function reset(){
    // 三种改变state的方法展示。
    counter.count=0; // 直接变更。
    // counter.$patch(state=>{state.count=0}) // 传入箭头函数来变更。
    // counter.$patch({count:0}) // 传入新的state对象来变更。
}
</script>
<template>
  <div>
    <div @click="counter.increment()">{{ counter.count }}、{{ counter.doubleCount }}</div>
        <button @click="reset()">reset</button>
  </div>
</template>

(2). 组合式API写法 中 使用解构语法。

<script setup>
import { storeToRefs } from 'pinia';
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore();

let { count,doubleCount } = storeToRefs(counter);
const { increment } = counter;

function reset(){
	// 四种改变state的方法展示。
	count.value = 0; // 需要通过.value来改变响应式ref的值，这样写能够直接改变counter中state count的值。
	// counter.count=0;
	// counter.$patch(state=>{state.count=0}) // 传入箭头函数来变更。
	// counter.$patch({count:0}) // 传入新的state对象来变更。
}
</script>
<template>
  <div>
    <div @click="increment()">{{ count }}、{{ doubleCount }}</div>
		<button @click="reset()">reset</button>
  </div>
</template>

(3). 选项式API写法。

<script>
import {mapState,mapActions,mapStores} from 'pinia'; // mapGetters,
import {useCounterStore} from '@/stores/counter';
export default{
    computed:{
        ...mapStores(useCounterStore), // 如果还有其它Stores要引入，那么就在useCounterStore后面加上“,其它Stores”。
        ...mapState(useCounterStore,['count','doubleCount']), // mapState现在返回的接口 已经 包含getters了。
        // ...mapGetters(useCounterStore,['doubleCount']), // 已经不推荐使用mapGetters了。
    },
    methods:{
        ...mapActions(useCounterStore,['increment']),
        reset(){
            this.counterStore.count = 0;
            // this.counterStore.$patch({count:0});
            // this.counterStore.$patch(state=>{state.count=0});
        }
    }
}
</script>

<template>
  <div>
        <div @click="increment()">{{ count }}、{{ doubleCount }}</div>
        <button @click="reset()">reset</button>
  </div>
</template>