2022.07.13 pinia的简单使用

使用前说明：

　　当前demo使用了vue3 + vite + typescript + pinia搭建的简单项目，主要介绍了在单文件组件（sfc）基础上使用pinia的用法，懒得看api的兄弟们，来这瞅瞅直接用。

安装：

　　yarn add pinia  (yarn包管理器) 

　　npm install pinia (npm包管理器)

介绍：

　　其实就是一个全局状态管理的对象，相对vuex来讲，它仅有三个概念state、getters、actions，可以假设为组件中的数据源、计算和方法。

使用：

   1、在整个项目中引入pinia

import { createPinia } from 'pinia'

app.use(createPinia())

　2、定义store对象

import { defineStore } from 'pinia'

// 仓库名称在命名时推荐使用use开头的名称，当然命名不受限制，只要你开心啥都行。
// defineStore函数接受的第一个参数是定义该仓库的id,具有唯一性
export const useStore = defineStore('main', {
  // other options...
})

　3、使用store对象

// 假设定义store对象的时候，该对象的文件路径为src/store/index.ts，并且src/已经在vite.config.ts和tsconfig.json文件中配置为@

<script setup lang="ts">
// 引入定义store对象的文件
import { useStore } from '@/store'

// 这个时候会返回整个store实例以在模板中使用它，这个时候就可以在store上直接访问state、getters、actions中定义的任何属性和方法
// 推荐在不同的文件中定义不同的store
const store = useStore()
</script> 

   4、state，即数据源

• 定义state对象

  // 定义state的形式比较多，我选择行数最少的
  export const useStore = defineStore('main', {　　　　　　
      // 第一种
      state () {
          return {
            name: 'hello'
              // 需要保存的数据源
          }
      }
      // 第二种（经常使用的）
      state: () => ({
  　　       name: 'hello'
             // 需要保存的数据源
      }),
      // 第三种
      state: () => {
          return {
             name: 'hello'
             // 需要保存的数据源
          }
      },
  })

• state对象的获取

  <script setup lang="ts">
  import { useStore } from '@/store'
  const store = useStore();
  
  // 获取state中的对象,直接取值即可，在模板中进行渲染，切忌使用解构赋值，导致仓库无法响应式更新对象
  const name = store.name
  </script>

• state对象的修改

  • direct，即直接修改

    <script setup lang="ts">
    import { useStore } from '@/store'
    const store = useStore();
    
    // 直接修改
    store.name = 'world'
    </script> 

  • patch object，即通过$patch接受对象的方式修改

    <script setup lang="ts">
    import { useStore } from '@/store'
    const store = useStore();
    
    // store提供$patch方法，接受对象作为参数更新store对象
    store.$patch({
        name: 'world',
    })
    </script>  

  • patch function，即通过$patch接受函数的方式修改　

    <script setup lang="ts">
    import { useStore } from '@/store'
    const store = useStore();
    
    // store提供$patch方法，接收函数作为参数更新store对象，接收的函数形参第一个默认为数据源state对象
    store.$patch((state: any) => {
        state.name = 'world';
     })
    </script> 

  • 整体替换

    <script setup lang="ts">
    import { useStore } from '@/store'
    const store = useStore();
    
    // 全部替换store对象
    store.$state = { counter: 666, name: 'world' }
    </script>

  • 订阅状态

    <script setup lang="ts">
    import { useStore } from '@/store'
    const store = useStore();
    
    // 订阅,只会在 patches 之后触发一次
    // 默认情况下，state subscriptions 绑定到添加它们的组件（如果 store 位于组件的 setup() 中）。 意思是，当组件被卸载时，它们将被自动删除。 如果要在卸载组件后保留它们，请将 { detached: true } 作为第二个参数传递给 detach 当前组件的 state subscription：
    store.$subscribe((mutation, state) => {
      // import { MutationType } from 'pinia'
      mutation.type // 'direct' | 'patch object' | 'patch function'
      // 与 store.$id 相同
      mutation.storeId // 'main'
      // 仅适用于 mutation.type === 'patch object'
      mutation.payload // 补丁对象传递给 to store.$patch()
    
      // 每当它发生变化时，将整个状态持久化到本地存储
      localStorage.setItem('store', JSON.stringify(state))
    }, { detached: true })
    </script>

    5、getters

• 定义getters对象

  export const useSomeStore = defineStore('second', {
      state: () => ({
          number: 2
       }),
      getters: {
         // getters下的所有方法默认第一个参数为数据源，主要是依赖state对象做一些计算操作
          doubleNumber(state) {
              return state.number * 2
          },
          // 该方法依赖getters下的doubleNumber方法，使用this指向当前store实例对象
          fourNumber(): number {
              return this.doubleNumber * 2
          },
         // 在调用getters下该方法时可以传递自定义参数信息，如下的num形参
          customNumber(state) {
              return (num: number) => state.number * num
          },
      }
  })     

• 使用getters对象下的方法

  <script setup lang="ts">
  import { useSomeStore } from '@/store'
  
  const someStore = useSomeStore();
  // 有参数时
  someStore.customNumber(2)
  // 无参数时
  someStore.doubleNumber()
  someStore.fourNumber()
  </script>　　 　　

    6、actions

• 定义actions对象

  export const useSomeStore = defineStore('second', {
      state: () => ({
          number: 2
       }),
      getters: {
         // getters下的所有方法默认第一个参数为数据源，主要是依赖state对象做一些计算操作
          doubleNumber(state) {
              return state.number * 2
          },
          // 该方法依赖getters下的doubleNumber方法，使用this指向当前store实例对象
          fourNumber(): number {
              return this.doubleNumber * 2
          },
         // 在调用getters下该方法时可以传递自定义参数信息，如下的num形参
          customNumber(state) {
              return (num: number) => state.number * num
          },
      }，
      // 最主要的是actions 可以是异步的
       actions: {
          addNumber() {
              this.number++
          }
      }
  })   

• 使用actions对象下的方法

  <script setup lang="ts">
  import { useSomeStore } from '@/store'
  
  const someStore = useSomeStore();
  // 使用
  someStore.addNumber()
  </script>　　 

• 订阅actions

  // 这个直接看官网描述，哈哈，写的疲惫了
  const unsubscribe = someStore.$onAction(
    ({
      name, // action 的名字
      store, // store 实例
      args, // 调用这个 action 的参数
      after, // 在这个 action 执行完毕之后，执行这个函数
      one rror, // 在这个 action 抛出异常的时候，执行这个函数
    }) => {
      // 记录开始的时间变量
      const startTime = Date.now()
      // 这将在 `store` 上的操作执行之前触发
      console.log(`Start "${name}" with params [${args.join(', ')}].`)
  
      // 如果 action 成功并且完全运行后，after 将触发。
      // 它将等待任何返回的 promise
      after((result) => {
        console.log(
          `Finished "${name}" after ${
            Date.now() - startTime
          }ms.\nResult: ${result}.`
        )
      })
  
      // 如果 action 抛出或返回 Promise.reject ，onError 将触发
      one rror((error) => {
        console.warn(
          `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
        )
      })
    }
  )
  
  // 手动移除订阅
  unsubscribe()

总结：

上面的代码有些是手敲上去的，直接复制粘贴可能会报错哈，小心小心！！！

标签：13,const,name,getters,state,pinia,2022.07,useStore,store
来源： https://www.cnblogs.com/niupeinan/p/16475247.html