Vue替代vuex的存储库Pinia详细介绍

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

import { createPinia, PiniaVuePlugin } from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
new Vue({
  el: '#app',
  // 其他选项...
  // ...
  // 注意同一个 `pinia` 实例可以在多个 Vue 应用程序中使用
  // 同一个页面
  pinia,
})

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
      msg: '开心',
      todoList: ['吃饭', '绘画']
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },
  actions: {
    increment(payload?: number) {
      this.count = payload ? this.count + payload : this.count + 1
    }
  }
})

  <template>
	<div class="about">
		<p>{{ counterStore.msg }}</p>
	    <p>{{ counterStore.count }}</p>
	    <p>{{ counterStore.doubleCount }}</p>
	    <p @click="() =>counterStore.increment(3)">点击我+1</p>
  </div>
  </template>
  <script setup lang="ts">
	  import { storeToRefs } from 'pinia'
	  import { useCounterStore } from '@/stores/counter'
	  const counterStore = useCounterStore()
  </script>

<template>
  <div class="about">
    <p>{{ count }}</p>
    <p>{{ msg }}</p>
    <p>{{ doubleCount }}</p>
    <ul>
      <li v-for="(item, index) in todoList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script setup lang="ts">
  import { storeToRefs } from 'pinia'
  import { useCounterStore } from '@/stores/counter'
  const counterStore = useCounterStore()
  // 也可以使用storeToRefs进行解构
  let { count, doubleCount, msg, todoList } = storeToRefs(counterStore)
</script>

counterStore.count++

const newTodoList = [...counterStore.todoList, '睡午觉']
counterStore.$patch({
	 count: 100,
	 msg: '哈哈',
	 todoList: newTodoList
})

counterStore.$patch((state) => {
    state.count = 100,
    state.msg = '哈哈',
    state.todoList.push('听音乐')
})

actions: {
    increment(payload?: number) {
      this.count = payload ? this.count + payload : this.count + 1
    }
}

counterStore.$reset()

counterStore.$state = {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> counter: 666, msg: 'Paimon', todoList: [] }

pinia.state.value = {}

counterStore.$subscribe((mutation, state) => {
  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem('cart', JSON.stringify(state))
})

export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
      msg: '开心',
      todoList: ['吃饭', '绘画']
    }
  },
  getters: {
  //自动将返回类型推断为数字
    doubleCount(state) {
      return state.count * 2
    }
  }
})

getters: {
	// 返回类型必须明确设置
    doublePlusOne():number {
      return this.doubleCount + 1
    }
  }

getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  }

<template>
  <p>User 2: {{ counterStore.getUserById(2) }}</p>
</template>