vue3+js+vite学习之pinia的state数据更新

对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>