经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3探索——5分钟快速上手大菠萝pinia
来源：cnblogs　　作者：前端cry　　时间：2023/9/10 14:25:48　　对本文有异议

温馨提示：本文以vue3+vite+ts举例，vite配置和ts语法侧重较少，比较适合有vuex或者vue基础的小伙伴们儿查阅。

安装pinia

  • yarn
  1. yarn add pinia
  • npm
  1. npm install pinia
  • pnpm
  1. pnpm add pinia

1-开始

方式一：在main.ts中直接引入pinia

在 src/main.ts 中引入pinia（根存储），并传递给应用程序。

  1. import { createApp } from 'vue'
  2. import './style.css'
  3. import App from './App.vue'
  5. // 1-创建一个 pinia（根存储）
  6. import { createPinia } from 'pinia'
  8. const app = createApp(App)
  10. // 2-告诉应用程序，我们将使用pinia
  11. const pinia = createPinia();
  12. // 以插件形式传递给app
  13. app.use(pinia);
  15. app.mount('#app');

方式二（推荐）：单独开个.ts文件引入pinia

在根目录下新建文件夹，这里我命名为store，再在文件夹下新建一个index.ts文件(src/store/index.ts)，用以配置和引入pinia。

  1. // 1-创建一个 pinia（根存储）
  2. import { createPinia } from 'pinia'
  4. // 2-定义pinia实例
  5. const pinia = createPinia();
  7. // 3-暴露pinia实例
  8. export default pinia;

然后在src/main.ts 中使用。

  1. ......
  2. import pinia from '@/store/index.ts'
  3. app.use(pinia);
  4. ......

其实和方式一没啥区别，只是为了保持main.ts文件整洁，并且方便配置pinia。

2-创建仓库

pinia与vuex差不多，相比于vuex，少了mutation 和modules。

pinia创建仓库，有选项式写法和组合式写法。

选项式Options API写法

在根目录下创建一个文件夹store (src/store)，在store文件夹中可以创建你的仓库，比如下面我创建了一个名为user的仓库 (src/store/user.ts)。

  1. // 选项式写法
  2. // 1-引入api
  3. import { defineStore } from "pinia";
  5. // 2-定义仓库
  6. const store = defineStore('user', {
  7.     // 3-设置组件共享的状态，相当于组件的data
  8.     state: () => ({
  9.         userInfo: {
  10.             name: '老刘',
  11.             sex: '男',
  12.             age: 17,
  13.             isStudent: false
  14.         },
  15.         token: '5201314',
  16.         password: '123456',
  17.     }),
  18.     // 3-设置状态计算值，相当于组件的computed
  19.     getters: {
  20.         name: (state) => state.userInfo.name,
  21.         sex: (state) => state.userInfo.sex,
  22.     },
  23.     // 3-设置组件共享的方法，相当于组件的methods
  24.     actions: {
  25.         addAge() {
  26.             this.userInfo.age++;
  27.         }
  28.     }
  29. });
  31. // 最后别忘了把仓库暴露出去哦
  32. export default store;

组合式Composition API写法（推荐）

上面的仓库 (src/store/user.ts)组合式写法如下：

  1. // 组合式写法
  2. // 1-引入pinia的api
  3. import { defineStore } from "pinia";
  4. // 2-引入vue3相关api
  5. import { ref, reactive, computed } from 'vue';
  7. // 3-定义仓库，注意第二个参数需要传入一个函数，函数需要返回一个对象！
  8. const store = defineStore('user', () => {
  9.     // 4-在这里面可以像在组件中一样，使用vue3的API，定义响应式数据
  10.     const userInfo = reactive({
  11.         name: '老刘',
  12.         sex: '男',
  13.         age: 17,
  14.         isStudent: false
  15.     });
  16.     const token = ref('5201314');
  17.     const password = ref('123456');
  19.     // 这里computed的作用相当于getters
  20.     const name = computed(() => userInfo.name);
  21.     const sex = computed(() => userInfo.sex);
  23.     // 4-还可以定义方法
  24.     function addAge() {
  25.         userInfo.age++;
  26.     }
  28.     // 5-然后把需要共享的数据或方法，装进一个对象，return出去
  29.     return {
  30.         userInfo,
  31.         token,
  32.         password,
  33.         name,
  34.         sex,
  35.         addAge
  36.     }
  37. });
  39. // 最后别忘了把仓库暴露出去哦
  40. export default store;

TIP

还可以在仓库中使用watch、watchEffect等vue3的API喔~。

  1. import { ref, reactive, computed, watch } from 'vue';
  2. const store = defineStore('user', () => {
  3.     const userInfo = reactive({
  4.         age: 17,
  5.     });
  6.     // 使用vue3的watch()函数，可以对仓库状态进行监听
  7.     watch(() => userInfo.age, (val) => {
  8.         console.log(val);
  9.     });
  10. });

3-使用pinia

完成了上面的工作后，我们就可以在组件中愉快地使用pinia啦！

下面以src/App.vue作为示例。

(1)引入仓库

  1. <template>
  3. </template>
  5. <script setup lang="ts">
  6. // 1-引入刚刚自定义的仓库，模块名store 可以自定义
  7. import store from '@/store/user.ts';
  9. // 2-使用仓库，仓库实例名userStore 可以自定义
  10. const userStore = store();
  11. </script>

(2)在组件中访问仓库state和getters

在模板和script中，state和getters可以看作仓库实例（如userStore）的属性，直接加.访问即可。

  1. <template>
  2.     <div>
  3.         <!-- 1-访问仓库的计算属性getters -->
  4.         <span>姓名：{{ userStore.name }}</span>
  5.         <span>性别：{{ userStore.sex }}</span>
  6.         <!-- 1-访问仓库的状态state -->
  7.         <span>年龄：{{ userStore.userInfo.age }}</span>
  8.         <span>是否学生：{{ userStore.userInfo.isStudent ? '是' : '否' }}</span>
  9.     </div>
  10. </template>
  12. <script setup lang="ts">
  13. import store from '@/store/user.ts';
  14. const userStore = store();
  16. // 1-访问state和getters，类似于reactive响应式数据的访问
  17. console.log('userStore', userStore);
  18. console.log('姓名：', userStore.name);
  19. console.log('性别：', userStore.sex);
  20. console.log('年龄：', userStore.userInfo.age);
  21. console.log('是否学生：', userStore.userInfo.isStudent ? '是' : '否');
  22. </script>
输出 
  1.     userStore Proxy(Object) {$id: 'user', $onAction: ?, $patch: ?, $reset: ?, $subscribe: ?, …}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false
  2.     
  3.     姓名： 老刘
  4.     性别： 男
  5.     年龄： 17
  6.     是否学生： 否

(3)在组件中使用仓库actions

使用仓库方法与访问仓库state类似，仓库实例后直接加.调用即可。

  1. <template>
  2.     <div>
  3.         <!-- 按钮点击，年龄+1 -->
  4.         <button @click="onAddAge">年龄+1</button>
  5.         <span>年龄：{{ userStore.userInfo.age }}</span>
  6.     </div>
  7. </template>
  9. <script setup lang="ts">
  10. import store from '@/store/user.ts';
  11. const userStore = store();
  13. // 按钮点击触发
  14. function onAddAge() {
  15.     // 1-使用仓库的actions
  16.     userStore.addAge();
  17. }
  18. </script>

(4)修改state

直接修改

与vuex不同，pinia支持在组件中直接修改state。

  1. <template>
  2.     <div>
  3.         <!-- 按钮点击，年龄+1 -->
  4.         <button @click="onAddAge">年龄+1</button>
  5.         <span>年龄：{{ userStore.userInfo.age }}</span>
  6.     </div>
  7. </template>
  9. <script setup lang="ts">
  10. import store from '@/store/user.ts';
  11. const userStore = store();
  13. // 按钮点击触发
  14. function onAddAge() {
  15.     // 1-直接修改state
  16.     userStore.userInfo.age++;
  17. }
  18. </script>

利用仓库actions进行修改

src/store/user.ts

  1. ......
  3. const store = defineStore('user', () => {
  4.     ......
  6.     // 1-定义方法
  7.     function addAge() {
  8.         userInfo.age++;
  9.     }
  11.     // 2-return出去
  12.     return {
  13.         addAge
  14.     }
  15. });
  17. // 3-导出仓库
  18. export default store;

src/App.vue

  1. <template>
  2.     <div>
  3.         <!-- 按钮点击，年龄+1 -->
  4.         <button @click="onAddAge">年龄+1</button>
  5.         <span>年龄：{{ userStore.userInfo.age }}</span>
  6.     </div>
  7. </template>
  9. <script setup lang="ts">
  10. import store from '@/store/user.ts';
  11. const userStore = store();
  13. // 按钮点击触发
  14. function onAddAge() {
  15.     // 4-使用仓库的方法
  16.     userStore.addAge();
  17. }
  18. </script>

批量变更

通过仓库实例（如userStore）的 $patch 方法，可以对state同时应用多个更改。

  1. <script setup lang="ts">
  2. ......
  4. function changeState() {
  5.     console.log(userStore.token); // '5201314'
  6.     console.log(userStore.password); // '123456'
  8.     // $patch()接收一个对象，对象内的属性是 需要变更的state
  9.     // 注意是变更，新增state是无效的！
  10.     userStore.$patch({
  11.         token: '1024',
  12.         password: '654321'
  13.     });
  15.     console.log(userStore.token); // '1024'
  16.     console.log(userStore.password); // '654321'
  17. }
  18. </script>

上面的方法每次进行批量修改都需要传入一个新对象，有时候使用起来并不方便。下面是另一种写法，$patch接受一个函数来批量修改集合内部分对象。（推荐）

  1. <script setup lang="ts">
  2. ......
  4. function changeState() {
  5.     // 这里的any是typescript的类型标注，可以不用理会
  6.     // 回调函数的参数state就是 仓库目前的state
  7.     userStore.$patch((state: any) => {
  8.         state.token = '1024';
  9.         state.password = '654321';
  10.     });
  11. }
  12. </script>

整体替换（不推荐）

通过仓库实例（如userStore）的 $state 属性，来为新对象替换仓库的整个状态。

pinia官网提到整体替换state的方法，但并未说明是否保留数据响应式。经笔者实践，这种方法会丢失数据的响应式，所以不推荐使用。

  1. <script setup lang="ts">
  2. ......
  4. function updateStore() {
  5.     userStore.$state = {
  6.         userInfo: {
  7.             name: '老王',
  8.             sex: '男',
  9.             age: 66,
  10.             isStudent: false
  11.         }
  12.     };
  13. }
  14. </script>

(5)重置state

通过调用仓库实例上的 $reset() 方法将状态重置到其初始值。

  1. <script setup lang="ts">
  2. ......
  4. function resetStore() {
  5.     userStore.$reset();
  6. }
  7. </script>

$reset() 的坑

细心的你会发现，仓库state并没有重置，然后你打开你的的控制台，你会惊讶地发现它报了这么一个错误：

这时候请你不要慌，先冷静地看一下报错信息。

这里翻译一下：Store "user"是使用setup语法构建的，不实现$reset()。（猜测是pinia的缺陷）

所以，根据报错信息，这里提供下面两种解决方案。

使用选项式Options API

使用选项式Options API编写pinia仓库，并且在组件中不能用script setup语法，要使用setup函数进行开发。

src/store/user.ts

  1. ......
  3. // 使用选项式Options API编写仓库
  4. const store = defineStore('user', {
  5.     // 3-设置组件共享的状态，相当于组件的data
  6.     state: () => ({
  7.         userInfo: {
  8.             name: '老刘',
  9.             sex: '男',
  10.             age: 17,
  11.             isStudent: false
  12.         },
  13.         token: '5201314',
  14.         password: '123456',
  15.     }),
  16. });
  18. export default store;

src/App.vue

  1. <!-- 这里不能用script setup，否则依然报错 -->
  2. <script lang="ts">
  3. import store from '@/store/user.ts';
  5. export default {
  6.     setup() {
  7.         const userStore = store();
  9.         function resetStore() {
  10.             // 重置state
  11.             userStore.$reset();
  12.         }
  14.         // 把响应式数据或方法return出去
  15.         return {
  16.             userStore,
  17.             resetStore
  18.         }
  19.     },
  20. }
  21. </script>

重写一个$reset()方法（推荐）

原理：自定义pinia插件(Plugins)，利用$patch() 重置整个state。

在之前创建的pinia配置文件中修改(src/store/index.ts)。

  1. import { createPinia } from 'pinia';
  2. const pinia = createPinia();
  4. // 1-使用pinia自定义插件
  5. pinia.use(({ store }) => {
  6.     // 2-获取最开始的State
  7.     const initialState = JSON.parse(JSON.stringify(store.$state));
  8.     // 3-重写$reset()方法
  9.     store.$reset = () => {
  10.         // 4-利用$patch()批量变更state，达到重置state的目的
  11.         store.$patch(initialState);
  12.     }
  13. });
  15. export default pinia;

推荐使用这种方法，这样就可以在script setup中愉快地使用pinia啦！

完整示例

仓库配置

src/store/index.ts

  1. import { createPinia } from 'pinia';
  2. const pinia = createPinia();
  4. pinia.use(({ store }) => {
  5.     const initialState = JSON.parse(JSON.stringify(store.$state));
  6.     store.$reset = () => {
  7.         store.$patch(initialState);
  8.     }
  9. });
  11. export default pinia;

定义仓库

src/store/user.ts

  1. // 组合式写法
  2. import { defineStore } from "pinia";
  3. import { ref, reactive, computed, watch } from 'vue';
  5. const store = defineStore('user', () => {
  6.     const userInfo = reactive({
  7.         name: '老刘',
  8.         sex: '男',
  9.         age: 17,
  10.         isStudent: false
  11.     });
  12.     const token = ref('5201314');
  13.     const password = ref('123456');
  15.     const name = computed(() => userInfo.name);
  16.     const sex = computed(() => userInfo.sex);
  18.     watch(() => userInfo.age, (val) => {
  19.         console.log(val);
  20.     });
  22.     function addAge() {
  23.         userInfo.age++;
  24.     }
  26.     return {
  27.         userInfo,
  28.         token,
  29.         password,
  30.         name,
  31.         sex,
  32.         addAge
  33.     }
  34. });
  36. export default store;

父组件

src/App.vue

  1. <template>
  2.     <div>
  3.         <button @click="resetStore">重置store</button>
  4.         <h1>我是父组件</h1>
  5.         <button @click="userStore.userInfo.age++">年龄+1</button>
  6.         <span class="marginLeft60">姓名：{{ userStore.name }}</span>
  7.         <span class="marginLeft60">性别：{{ userStore.sex }}</span>
  8.         <span class="marginLeft60 red">年龄：{{ userStore.userInfo.age }}</span>
  9.         <span class="marginLeft60 red">是否学生：{{ userStore.userInfo.isStudent ? '是' : '否' }}</span>
  10.         <hr>
  12.         <!-- 使用子组件A -->
  13.         <son-a />
  14.         <hr>
  16.         <!-- 使用子组件B -->
  17.         <son-b />
  18.         <hr>
  19.     </div>
  20. </template>
  22. <script setup lang="ts">
  23. // 引入子组件
  24. import SonA from './components/sonA.vue';
  25. import SonB from './components/sonB.vue';
  27. // 1-引入仓库
  28. import store from '@/store/user.ts';
  30. // 2-使用仓库
  31. const userStore = store();
  33. // 重置store
  34. function resetStore() {
  35.     userStore.$reset();
  36. }
  37. </script>
  39. <style>
  40. .marginLeft60 {
  41.     margin-left: 60px;
  42. }
  44. .red {
  45.     color: red;
  46. }
  47. </style>

子组件A

src/components/sonA.vue

  1. <template>
  2.     <div>
  3.         <h2>我是子组件A</h2>
  4.         <button @click="userStore.userInfo.isStudent = true">入学</button>
  5.         <span class="marginLeft60">姓名：{{ userStore.name }}</span>
  6.         <span class="marginLeft60">性别：{{ userStore.sex }}</span>
  7.         <span class="marginLeft60 red">年龄：{{ userStore.userInfo.age }}</span>
  8.         <span class="marginLeft60 red">是否学生：{{ userStore.userInfo.isStudent ? '是' : '否' }}</span>
  9.         <grandson />
  10.     </div>
  11. </template>
  13. <script setup lang="ts">
  14. import Grandson from './grandson.vue';
  15. import store from '@/store/user.ts';
  17. const userStore = store();
  18. </script>

子组件B

src/components/sonB.vue

  1. <template>
  2.     <div>
  3.         <h2>我是子组件B</h2>
  4.         <button @click="userStore.userInfo.isStudent = false">毕业</button>
  5.         <span class="marginLeft60">姓名：{{ userStore.name }}</span>
  6.         <span class="marginLeft60">性别：{{ userStore.sex }}</span>
  7.         <span class="marginLeft60 red">年龄：{{ userStore.userInfo.age }}</span>
  8.         <span class="marginLeft60 red">是否学生：{{ userStore.userInfo.isStudent ? '是' : '否' }}</span>
  9.     </div>
  10. </template>
  12. <script setup lang="ts">
  13. import store from '@/store/user.ts';
  14. const userStore = store();
  15. </script>

孙组件

src/components/grandson.vue

  1. <template>
  2.     <div>
  3.         <h3>我是孙组件</h3>
  4.         <span class="marginLeft60">姓名：{{ userStore.name }}</span>
  5.         <span class="marginLeft60">性别：{{ userStore.sex }}</span>
  6.         <span class="marginLeft60 red">年龄：{{ userStore.userInfo.age }}</span>
  7.         <span class="marginLeft60 red">是否学生：{{ userStore.userInfo.isStudent ? '是' : '否' }}</span>
  8.     </div>
  9. </template>
  11. <script setup lang="ts">
  12. import store from '@/store/user.ts';
  13. const userStore = store();
  14. </script>

效果图

原文链接：https://www.cnblogs.com/cry0-0/p/17691177.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号