Pinia(二)了解和使用Store

这篇具有很好参考价值的文章主要介绍了Pinia(二)了解和使用Store。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Store

  1. Store 是保存状态(state)和业务逻辑的实体, store 不应该与我们的组件绑定. 换句话说, store 就是全局状态.
  2. store 有三个关键概念, 分别是 state, gettersactions, 这与 Vue 组件中的 data, computedmethods 是相对应的概念.
定义 store
  1. 通过 defineStore 函数定义 store.
    • defineStore 接收两个参数
      • id: 唯一的标识, string 类型. Pinia 使用 id 与开发者工具建立联系.
      • 第二个参数可以是一个函数, 也可以是一个对象.
    • defineStore 返回一个函数, 一般约定将返回值命名为 use....
  2. 第二个参数: 对象类型
    • 如果要传入对象类型作为第二个参数, 在对象中可以配置
      • state: 状态, 即数据. 📕注意 state 是一个函数, 函数的返回值才是真正定义的数据
      • getters: 计算属性
      • actions: 修改状态的方法
      • export const useCounterStore = defineStore('counter', {
          state: () => {
            return {
              count: 0,
            }
          },
          getters: {
            doubleCount: (state) => {
              return state.count * 2;
            }
          },
          actions: {
            increment(a: number) {
              this.count += a
            }
          }
        })
        
  3. 第二个参数: 函数类型
    • 在函数中可以通过 ref/reactive 定义响应式数据, 通过 computedwatch 定义计算属性和侦听器, 再定义一些修改数据的方法, 并通过返回对象的形式将其中一些数据暴露出去.
      • import { defineStore } from 'pinia';
        import { ref } from 'vue';
        
        export const useNameStore = defineStore('name', () => {
          const name = ref('tom');
          function setName(newName: string) {
            name.value = newName;
          }
          return { 
            name,
            setName
          }
        });
        
使用 store
  1. 无论定义 store 时传入的参数是对象类型还是函数类型, 调用方法一致的. 我们需要在 setup() 函数或 <script setup> 中使用

    • import { useCounterStore } from '../store';
      import { useNameStore } from '../store/index2'
      
      // 第一个store: count
      const store = useCounterStore();
      function countPlus() {
        store.increment(1);
      }
      
      // 第二个store: name
      const name1 = useNameStore();
      function updateName1() {
        name1.setName('jerry1' + Math.random())
      }
      
    • 📕store 实例并不会被创建直到调用 useNameStore()

    • 可以直接通过 store. 的方式访问 store 的 state, 和

    • <h2>{{store.count}}</h2>
      <button @click="countPlus">countPlus</button>
      <hr>
      <h2>{{ name1.name }}</h2>
      <button @click="updateName1">updateName1</button>
      
    • Pinia(二)了解和使用Store

    • 📕注意修改数据时, 页面并没有失去响应式, 调用 isProxy 可以看出 use... 返回的结果统统都是响应式的数据

    • Pinia(二)了解和使用Store

  2. 失去响应式的陷阱

    • 如果解构 use.. 的返回值, 那么将失去响应式❗❗❗❗❗
    • const { name, setName } = useNameStore();
      function updateName() {
        setName('jerry' + Math.random());
      }
      
    • <h2>{{ name }}</h2>
      <button @click="updateName">updateName</button>
      
    • Pinia(二)了解和使用Store
  3. storeToRefs

    • 为了从 store 中解构出属性并且保持其响应式, 需要调用 storeToRefs. storeToRefs 将为每个响应式数据创建 ref.
    • 先看传入函数类型的 store
      • const nameStore2 = storeToRefs(useNameStore());
        console.log('nameStore2', nameStore2)
        
      • Pinia(二)了解和使用Store

      • 📕注意返回的 storeToRefs 返回的对象中只有 name, 而没有 setName, 因此完整的写法应该是

      • const nameStore = useNameStore();  
        const { setName } = nameStore;
        const { name } = storeToRefs(useNameStore());
        
    • 再看传入对象类型的 store
      • const store = useCounterStore();
        const countStore2 = storeToRefs(store)
        console.log('countStore2', countStore2);
        
      • Pinia(二)了解和使用Store

      • 📕只有 stategetters, 没有 actions, 因此要从 useCounterStore() 的返回值中解构出 actions 中的方法

      • const store = useCounterStore();
        const { count, doubleCount } = storeToRefs(store);
        const { increment } = store;
        function countPlus1() {
          increment(2);
        }
        
        

感谢你看到这里😀文章来源地址https://www.toymoban.com/news/detail-430741.html

到了这里,关于Pinia(二)了解和使用Store的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • electron+vue3全家桶+vite项目搭建【16.1】electron多窗口,pinia状态同步,扩展store方法,主动同步pinia的状态【推荐】

    demo项目地址 我们之前写了一个自动同步pinia状态的插件,可以参考如下文章 electron+vue3全家桶+vite项目搭建【16】electron多窗口,pinia状态无法同步更新问题解决 这里面有一个较大的弊端,就是pinia中的store,只要其中的某个属性修改,就会触发这个store的全量更新,当我们有一

    2024年02月11日
    浏览(95)
  • uni-app+vue3+ts+pinia报错【“hasInjectionContext“ is not exported by “node_modules/.store/pinia@2.1.7/n】

    【完整报错】\\\"hasInjectionContext\\\" is not exported by \\\"node_modules/.store/pinia@2.1.7/node_modules/vue-demi/lib/index.mjs\\\", imported by \\\"node_modules/.store/pinia@2.1.7/node_modules/pinia/dist/pinia.mjs\\\". 【报错原因】版本不匹配 查看package.json下pinia和vue版本 【版本参考界面】https://github.com/vuejs/pinia/blob/v2/packages/pini

    2024年04月11日
    浏览(46)
  • GPT Store上线,普通人需要了解什么?

    当地时间1月10日,OpenAI 的 GPT Store 正式上线! 过去两个月,用户已经创建了超 300 万个 GPTs。这次的发布主要面向 ChatGPT Plus、团队和企业用户推出。 通俗来说,GPT Store 类似于苹果的 App Store,就是把全市场的所有GPTs,做了一个集合,类似于“应用商店”。 上面有官方推荐、

    2024年01月22日
    浏览(44)
  • React Store及store持久化的使用

    store/modules/counterStore.ts: store/index.ts:   react-redux负责把Redux和React 链接 起来,内置 Provider组件,通过 store 参数把创建好的store实例注入到应用中,链接正式建立 main.tsx: useSelector,作用:在函数组件中获取redux数据存储对象中的某个数据 useDispatch,作用: 在函数组件中获取

    2024年01月17日
    浏览(42)
  • 【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储

    使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储。 存储方式 : localStorage sessionStorage pinia-plugin-persistedstate 中文官网 pinia 中文官网 安装和使用 pinia ,请参考使用pinia文章。 安装 pinia-plugin-persistedstate : 使用前先将 pinia-plugin-persistedstate添加到pinia实例上。 在添加的时

    2023年04月17日
    浏览(47)
  • 微信小程序TS项目使用mobx(页面直接使用store和自定义组件中使用store)

     注意:下载完成后,需要删除 miniprogram_npm 目录后,重新构建 npm。 注意:ts编写的话,方法中使用this,需要在参数中定义this: any,否则会提示错误 引入onLoad()方法中引入createStoreBindings将store上的方法和属性绑定到页面中 在unOnLoad()方法中销毁destroyStoreBindings() 页面中使用:

    2024年02月16日
    浏览(51)
  • 【Vue】pinia 数据持久化插件 pinia-plugin-persistedstate 使用

    刷新浏览器后,重新加载页面时会重新初始化 vue、 pinia,而 pinia 中状态的值仅在内存中存在,而刷新导致浏览器存储中的数据就没了。 在实际开发中,浏览器刷新时,有些数据希望是保存下来的。如用户登录后,用户信息会存储在全局状态中,如果不持久化状态,那么每次

    2024年02月07日
    浏览(44)
  • 抛弃Vuex,使用Pinia

    1.简介 官网 Pinia 起始于 2019 年 11 月左右的一次实验,其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起,我们就倾向于同时支持 Vue 2 和 Vue 3,并且不强制要求开发者使用组合式 API,我们的初心至今没有改变。除了 安装 和 SSR 两章之外,其余章节中提到的 API 均

    2024年02月06日
    浏览(40)
  • pinia的使用

    1. pinia和vuex的区别 pinia没有mutations,只有:state、 getters、 actions pinia分模块不需要modules(之前vuex分模块需要modules) pinia体积更小(性能更好) pinia可以直接修改state数据 2.安装pinia 根据需要 安装pinia-plugin-persist插件,实现持久化存储 3.main.ts中导入 4.创建store 新建store文件夹,

    2023年04月27日
    浏览(33)
  • Pinia的基本使用

    Pinia(发音为 /piːnjʌ/,类似于英语中的“peenya”)是最接近有效包名 piña(西班牙语中的pineapple,即“菠萝”)的词。 菠萝实际上是一组单独的花朵,它们结合在一起形成一个多重水果。 与 Store 类似,每一家都是独立诞生的,但最终都是相互联系的。用来比喻把一个一个的

    2024年02月01日
    浏览(79)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包