比vuex香的pinia最快速入门指南

最新推荐文章于 2024-09-13 14:34:15 发布

铁皮饭盒

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量197

点赞数

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/n6308/article/details/128617561

版权

如果是新项目, 完全基于setup的, 那么建议使用pinia代替vuex, vuex官网有说pinia可以理解为vuex5, vuex不会出5了.

安装

shell npm i pinia -S

使用

首先在"main.js"中引入"pinia", 并关联到"vue"实例上. javascript import { createApp } from 'vue' import {createPinia} from 'pinia' import App from './App.vue' const pinia = createPinia(); createApp(App).use(pinia).mount('#app') 然后创建"store", defineStore的第一个参数是store的id, 可以是任意字符, 定义数据可以用ref/reactive/computed, 注意导出的是一个函数. ```javascript import { defineStore } from 'pinia' import { ref,reactive,computed } from 'vue';

export const useStore = defineStore('main', () => { const title = ref(hello pinia) const list = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9]); const count = computed(() => list.reduce((a, b) => a + b)); function add(){ list.push(1) } return { title, count,list,add } }) 在组件内: html

标题: {{ store.title }}

总数: {{ store.count }}

列表: {{ store.list }}

```