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

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

说明

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

代码语言：javascript复制

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

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

    return {
        noteList
    }
})

• 在组件中修改 store

代码语言：javascript复制

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

ref state store vuex 响应式

0 人点赞