1.全局存储库pinia可以代替vuex,扁平化,用法更简单轻便
2.安装
npm install pinia --save --dev
3.使用
(1)在main.js中
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
app.$mount('#app')
(2)创建store.js
import { defineStore } from "pinia";
const useStore = defineStore('main', {
state() {
return {
count: 1
}
},
getters: {
doubleCount: (state) => state.count * 2,
},
actions: { // 支持同步与异步
increment(num) {
setTimeout(() => {
console.log(num)
this.count++
},800)
}
}
})
(3)页面中使用
<script setup>
import { useStore } from '@/store/index';
import { storeToRefs } from 'pinia'
const store = useStore()
// 使用 解构的方式取数据会使数据失去响应性,
// 可以使用 storeToRefs 保持其响应性
const { count } = storeToRefs(store)
// 修改state里面定义的数据的方式
// 方式一,通过 $patch 传入对象的形式修改
mianStore.$patch({
count: 4
})
// 方式二,通过 $patch 传入函数的形式修改
mianStore.$patch((state) => {
state.count++
console.log('count: ', state.count)
})
// 方式三,通过 actions 修改
mianStore.increment(10)
// 重置store
function resetData() {
store.$reset()
}
</script>