平台式网站,外贸网站建设基础,百度优化,职业教育网站开发目录
1.pinia是什么
2.为什么要使用pinia
3.pinia的优点
4.pinia在项目中使用
①创建一个使用pinia的Vue3项目
②在页面使用store 1.pinia是什么 Pinia 起源于一次探索 Vuex 下一个迭代的实验#xff0c;如果你学过Vue2#xff0c;那么你一定使用过Vuex。Vuex在Vue2中主…目录
1.pinia是什么
2.为什么要使用pinia
3.pinia的优点
4.pinia在项目中使用
①创建一个使用pinia的Vue3项目
②在页面使用store 1.pinia是什么 Pinia 起源于一次探索 Vuex 下一个迭代的实验如果你学过Vue2那么你一定使用过Vuex。Vuex在Vue2中主要充当状态管理的角色其实就是一个存储数据的地方存放在Vuex中的数据在各个组件中都能访问到它是Vue生态中重要的组成部分。在Vue3中可以使用传统的Vuex来实现状态管理也可以使用最新的pinia来实现状态管理 Pinia本质上依然是一个状态管理的库它允许你跨组件/页面进行状态共享 2.为什么要使用pinia 上面我们提到了在Vue3中可以使用传统的Vuex来实现状态管理也可以使用最新的pinia来实现状态管理那么既然Vue3还能使用Vuex为什么还要学pinia。所以pinia肯定相较于vuex使用起来更方便简单 与Vuex相比Pinia提供了更简单的API更少的规范和Composition-API风格的API最重要的是Vue3都推荐使用TS来编写pinia在与TS一起使用时具有可靠的类型推断支持 3.pinia的优点 mutations不再存在只有stategettesactions更友好的TypeScript支持不再有modules的嵌套结构每个store都是独立的互不影响没有命名空间模块无需动态添加 Store默认情况下它们都是动态的不再需要注入、导入函数、调用函数支持插件来扩展自身功能支持服务端渲染SSR 4.pinia在项目中使用 ①创建一个使用pinia的Vue3项目 可以参照该文章 pnpm快速创建 Vue.js 项目(npm类似)_turbo夏日漱石的博客-CSDN博客 注意 创建时是否添加pinia要选择yes创建时是否使用ts要选择yes 创建完成之后的main.ts代码 import ./assets/main.cssimport { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./routerconst app createApp(App)app.use(createPinia())
app.use(router)app.mount(#app)stores就是我们的数据仓库用来存放我们创建的store ②在页面使用store 以store下自带的counter.ts为例 counter.ts import { ref, computed } from vue
import { defineStore } from piniaexport const useCounterStore defineStore(counter, () {const count ref(0)const doubleCount computed(() count.value * 2)function increment() {count.value}return { count, doubleCount, increment }
})使用 直接在页面引声明的useCountersStore 方法 /src/App.vue
script setup langts
import { useCounterStore} from ../src/stores/counter;
const store useCounterStore();
console.log(store);
/script
