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() 函数或

你可能感兴趣的:(pinia,vue.js,javascript,前端,pinia)