（六）在组件中直接修改状态

老怪兽

发布于 2023-02-22 15:41:54

3290

发布于 2023-02-22 15:41:54

文章被收录于专栏：老怪兽的前端之旅

一、在组件中直接修改状态

说明

pinia 允许我们直接修改 store 里面的 state，不像 vuex 必须通过 mutations 才可以修改
因为我们定义的时候是使用 ref 来定义的他本身就是一个响应式数据，所以可以直接修改
store.js

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useNoteStore = defineStore('note', () => {
    const noteList = ref([
        {
            title: '标题1',
            desc: '详情内容1'
        }
    ])

    return {
        noteList
    }
})

在组件中修改 store

<script setup>
import { reactive } from 'vue'
import { useNoteStore } from '@/store/node.js'

const formData = reactive({
    title: '标题',
    desc: '详细内容'
})


cosnt noteStore = useNoteStore()
function addNote() {
    noteStore.noteList.push({
        title: formData.title,
        desc: formDta.desc
    })
}
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年11月28日，如有侵权请联系 cloudcommunity@tencent.com 删除

ref