对pinia中state数据更新方法进行总结
原始store文件
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useSystemInfoStore = defineStore('systemInfo', () => {
const title = ref('hello world')
return {
title
}
})
1、直接进行更新
store 是一个用 reactive 包裹的对象,可以直接通过reactive更新的方式对其更新
<script setup>
import { useSystemInfoStore } from '@/globalStore/systemInfoStore'
const systemInfoStore = useSystemInfoStore()
// 更新值
systemInfoStore.title = 'new hello world!'
</script>
2、解构之后更新
有时我们会对store里面的数据进行解构使用,解构之后就是ref类型,需要加.value进行数据更新
<script setup>
import { storeToRefs } from 'pinia'
import { useSystemInfoStore } from '@/globalStore/systemInfoStore'
const systemInfoStore = useSystemInfoStore()
// 使用storeToRefs解构
const { title } = storeToRefs(systemInfoStore)
// 更新值
title.value = 'new hello world!'
</script>
3、在store里面写actions方法进行值更新
在store写一个更新值的方法,在使用到的地方进行调用
原始store文件:
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useSystemInfoStore = defineStore('systemInfo', () => {
const title = ref('hello world')
const setTitle = (val) => {
title.value = val
}
return {
title,
setTitle
}
})
引用文件:
<script setup>
import { storeToRefs } from 'pinia'
import { useSystemInfoStore } from '@/globalStore/systemInfoStore'
const systemInfoStore = useSystemInfoStore()
// 更新值
systemInfoStore.setTitle('new hello world!')
</script>