Pinia状态管理工具速成

一、介绍
main.js展现了对Pinia的引用，这里与引用Vuex是类似的,而且并没有像Vuex一样在store/index.js在文件中进行相关的配置，而是直接的使用。

main.js

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

store/counter.js

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 }
})

export const useCounterStore = defineStore('counter', () => {})这里类似于Vuex中的modules

const count = ref(0)这里类似于Vuex中的state
const doubleCount = computed(() => count.value * 2)这里类似于Vuex中的getters

 function increment() {count.value++}这里类似于Vuex中的actions

mutation概念是不存在的，只要封装了的话就是actions

相较于Vuex更直观、简洁

二、Pinia实战案例

<script setup>
import { useCounterStore } from '../stores/counter'
const countStore = useCounterStore()
</script><template><div class="about"><h3>count:{{ countStore.count }}</h3><p>------------</p><h3>2*count:{{ countStore.doubleCount }}</h3><button @click="countStore.increment()">+1</button></div>
</template><style>
@media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
</style>

导入并创建示例
import { useCounterStore } from '../stores/counter'

const countStore = useCounterStore()

引用

<h3>count:{{ countStore.count }}</h3>

<p>------------</p>

<h3>2*count:{{ countStore.doubleCount }}</h3>

<button @click="countStore.increment()">+1</button>