pinia 初步理解

前提

写法是用的vue3,只是一些简单的写法

stores文件中的counter.js

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

actions: increment 的使用

只是单纯调用该方法，actions是可以改变源数据的

mport { useCounterStore } from '@/stores/counter'
const store = useCounterStore()

const handleClick = () => {
  store.increment()
}

getters:doubleCount 的使用

我的理解，getters是用来改造数据的，非元数据，改造过的可以直接调用

<template>
  <div class="right-view">
    <div>2倍count值：{{ store.doubleCount }}</div>
  </div>
</template>

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

const store = useCounterStore()
</script>

state:count

源数据

<template>
  <div class="right-view">
    <div>当前count值：{{ store.count }}</div>
  </div>
</template>

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

const store = useCounterStore()
</script>