（十五）OptionsApi 创建 Pinia

老怪兽

发布于 2023-02-22 07:48:01

30800

代码可运行

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

运行总次数：0

代码可运行

一、OptionsApi 创建 Pinia

说明

其实 optionsApi 配置 pinia 和 vuex 是一样的，如果已经会配置 vuex 了，那么 pinia 的 optionsApi 也已经会了
需要注意的是，当使用 optionsApi 配置的时候，defineStore 的第二个参数是一个 对象

import { defineStore } from 'pinia'

export default useNoteStore = defineStore('note', {
    state() {
        return {
            noteList: [
                {
                    title: '标题',
                    desc: '详情'
                }
            ],

            seachText: ''
        }
    },

    getters: {
        // 普通的方法
    },

    actions: {
        // 逻辑处理
    }
})

二、使用箭头函数的形式

如果使用箭头函数的话，就不能通过 this 来访问上面的状态，此时箭头函数接收一个，state 作为参数，通过这个参数来访问 state 的值

getters: {
    searchNotes: (state) => {
    // 如果搜索框为 空 就展示所有 noteList
    if(state.searchText === '') {
        return state.noteList
    } else {
        return state.noteList.filter(note => {
            return state.noteList.title.includes(state.searchText)
        })
    }
}
}

三、使用普通函数的形式

如果使用普通函数的形式的话就可以使用 this 来访问了

getters: {
    searchNotes() {
        // 如果搜索框为 空 就展示所有 noteList
        if(this.searchText === '') {
            return this.noteList
        } else {
            return this.noteList.filter(note => {
                return this.noteList.title.includes(this.searchText)
            })
        }
    }
}

四、获取其他 `state`

获取其他 state 不能放在 defineStore 外面获取, 只能在单个方法里面获取，获取的方法如下

import { useUserStore } from '@/store/user.js'

actions: {
    addNote(title, desc) {
        cosnt userStore = useUserStore()

        if(userStore.isLoggedIn) {
            // ...
        } else {
            // ...
        }
    }
}