Pinia（二）了解和使用Store

╰+哭是因爲堅強的太久メ 2024-05-24 04:38 73阅读 0赞

#### `Store` ####

1.  `Store` 是保存状态(`state`)和业务逻辑的实体, `store` 不应该与我们的组件绑定. 换句话说, `store` 就是全局状态.
2.  `store` 有三个关键概念, 分别是 `state`, `getters` 和 `actions`, 这与 `Vue` 组件中的 `data`, `computed` 和 `methods` 是相对应的概念.

##### 定义 `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` 定义响应式数据, 通过 `computed` 和 `watch` 定义计算属性和侦听器, 再定义一些修改数据的方法, 并通过返回对象的形式将其中一些数据暴露出去.
        
         *      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>
     *  ![在这里插入图片描述][1152e9bc62894b55a5b5785969a6f6c8.gif_pic_center]
     *  ?注意修改数据时, 页面并没有失去响应式, 调用 `isProxy` 可以看出 `use...` 返回的结果统统都是响应式的数据
     *  ![在这里插入图片描述][c79dac4e4f53496abe622c526f0411e5.png_pic_center]
2.  失去响应式的陷阱
    
     *  如果解构 `use..` 的返回值, 那么将失去响应式❗❗❗❗❗
     *      const {
                     name, setName } = useNameStore();
            function updateName() {
                    
              setName('jerry' + Math.random());
            }
     *      <h2>{
                   { name }}</h2>
            <button @click="updateName">updateName</button>
     *  ![在这里插入图片描述][88235c207b364dd9ac51739f0862851f.png_pic_center]
3.  `storeToRefs`
    
     *  为了从 `store` 中解构出属性并且保持其响应式, 需要调用 `storeToRefs`. `storeToRefs` 将为每个响应式数据创建 `ref`.
     *  先看传入函数类型的 `store`
        
         *      const nameStore2 = storeToRefs(useNameStore());
                console.log('nameStore2', nameStore2)
         *  ![在这里插入图片描述][1a73751087384ba8af0235daff8ab9ed.png_pic_center]
         *  ?注意返回的 `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);
         *  ![在这里插入图片描述][2b15826adfca4d0db872f2aec8084e49.png_pic_center]
         *  ?只有 `state` 和 `getters`, 没有 `actions`, 因此要从 `useCounterStore()` 的返回值中解构出 `actions` 中的方法
         *      const store = useCounterStore();
                const {
                           count, doubleCount } = storeToRefs(store);
                const {
                           increment } = store;
                function countPlus1() {
                          
                  increment(2);
                }

感谢你看到这里?

[1152e9bc62894b55a5b5785969a6f6c8.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/51e21074693746f6a802ae8375e32b00.gif
[c79dac4e4f53496abe622c526f0411e5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e3e311808307445588e68f4e139552df.png
[88235c207b364dd9ac51739f0862851f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/e62506dc785a4d67b5217d68dd1c4cce.png
[1a73751087384ba8af0235daff8ab9ed.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/7fa1195e4d9640578deec23960f1092f.png
[2b15826adfca4d0db872f2aec8084e49.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/76082111f1a740d78655cbb5cf771788.png