搭建pinia环境
第一步:npm install pinia
第二步:操作src/main.js
import { createApp } from 'vue'
import App from './App.vue'
/* 引入createPinia,用于创建pinia */
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
/* 使用插件 */{}
app.use(pinia)
app.mount('#app')
存储和读取数据
第三步: 操作src/store/count.js
import {defineStore} from 'pinia'
// 定义并暴露一个store
export const useCountStore = defineStore('count',{
// 状态
state(){
return {
sum:6
}
},
// 计算
getters:{},
// 动作
actions:{
setSum(num){
this.state.sum+=num
}
}
})
组件中使用state数据
<template>
<h2>当前求和为:{{ sumStore.sum }}</h2>
</template>
<script setup name="Count">
// 引入对应的useXxxxxStore
import {useCountStore} from '@/store/count'
// 调用useXxxxxStore得到对应的store
const sumStore = useCountStore()
</script>
修改数据的三种方式
- 第一种修改
sumStore.sum=8
- 第二种修改
sumStore.$patch({
sum:9
})
- 第三种修改,借助
action
修改(action
中可以编写一些业务逻辑)
// 使用countStore
import {useCountStore} from ‘@/store/count’
const sumStore = useCountStore()
// 调用对应action, setSum方法在上面src/store/count.js
有写
sumStore .setSum(10)