可代替vuex的Pinia用法

最新推荐文章于 2025-10-12 19:32:55 发布

原创最新推荐文章于 2025-10-12 19:32:55 发布 · 406 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #前端

pinia 同时被 2 个专栏收录

1 篇文章

订阅专栏

vuex

1 篇文章

订阅专栏

博客介绍了Pinia作为Vuex的轻量级替代，强调其简单易用，可在vue、jsx和js文件中使用。通过示例展示了如何创建和使用Pinia store，并指出尽管没有内置持久化存储，但可以借助外部工具实现。作者推荐使用Pinia而非依赖持久化存储的解决方案。

众所周知vuex的包有多大有多重，使用起来有多麻烦。

下面推荐Pinia给大家，轻便简单，最重要的是可以在vue文件，jsx文件，js文件中使用！

创建一个js文件，名称自己定义，defineStore第一个参数是当前store的名字，避免冲突。

import { defineStore } from "pinia";
export const useMarkStore = defineStore('common',{
    state: () => ({
        hasMarkModal: false,
        list: []
    }),
    actions: {
        changeMarkModal(isShow) {
            this.hasMarkModal = isShow
        },
        setListData(list){
            this.list = list
        }
    }
})

组件内引入即可。

import { useMarkStore } from '../../store/common.js';
<script setup>
    const list = [1,2,3,4]
    const store = useMarkStore()
    store.changeMarkModal(true)
    store.setListData(list)
    console.log(store.list) // [1,2,3,4]
</script>

如果非要挑刺说什么没有持久化存储，我觉得能用到持久化存储的都可以直接写window.localStorage去定义。

如果你非要用持久化存储，那pinia的和vuex一样，天生不支持，但是你也可以和vuex一样，能找到第三方的持久化存储工具，虽然我还是不推荐使用！

详细内容请看：Pinia官网

最后一遍：Pinia可以在vue文件，jsx文件，js文件中使用！！！