2022.07.13 vue3下pinia的简单使用及持久化

使用前说明：

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

安装：

　　yarn add pinia  (yarn包管理器)

　　npm install pinia (npm包管理器)

介绍：

　　其实就是一个全局状态管理的对象，它托管全局状态。相对vuex来讲，它仅有三个概念state、getters、actions，可以假设为组件中的数据源、计算和方法。当然，如果是特别小型的单页应用程序中，直接通过export const state = reactive({})即可，完全符合需求。

使用：

1、在整个项目中引入pinia

import { createPinia } from 'pinia'

app.use(createPinia())

　2、定义store对象

import { defineStore } from 'pinia'

// 仓库名称在命名时推荐使用use开头的名称，命名为 use... 是跨可组合项的约定，当然不遵守约定也行，只要你开心就好。
// defineStore函数接受的第一个参数是定义该仓库的id,具有唯一性，pinia使用它将store连接到devtools。第二个参数为一个对象，里面包含各种选项信息,如下
export const useStore = defineStore('main', {
  // other options...
})

// defineStore函数接受的第二个参数也可以是一个回调函数，它允许你自定义仓库信息

// 推荐在不同的文件中定义不同的store

import { reactive } from 'vue'

export const useStore = defineStore('main', () => {

    const state = reactive({
        name: 'niu',
        age: 18
    })
    const increatment = (param: any) => {
        let params = param || state
        state.age++
    }
    return {
        state,
        increatment
    }
}

)

　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对象的重置

  <script setup lang="ts">
  import { useStore } from '@/store'
  const store = useStore();
  
  // 重置仓库对象至初始值
  store.$reset()
  </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 = { 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()
    
      // 每当它发生变化时，将整个状态持久化到本地存储。detached属性为true时，意味着组件卸载后需要保留store,默认为自动删除
      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 执行完毕之后，执行这个函数
      onError, // 在这个 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 将触发
      onError((error) => {
        console.warn(
          `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
        )
      })
    }
  )
  
  // 手动移除订阅
  unsubscribe()

持久化存储：

• 下载pinia-plugin-persist插件
• 在pinia中扩展该插件

  import { createPinia } from 'pinia'
  import piniaPluginPersist from 'pinia-plugin-persist'
  
  const store = createPinia();
  store.use(piniaPluginPersist)
  
  app.use(store) 

• 在选项中进行配置

  // 开启数据持久化
  export const usrCustomStore = defineStore('custom', {
     persist: true   // 默认所有选项
  })
  
  export const usrCustomStore = defineStore('custom', {
      persist: {
         enabled: true, // 开启持久化存储
         strategies: [
             {
               // 修改存储中使用的键名称，默认为当前 Store的id
               key: 'custom',
               // 修改为 sessionStorage，默认为 localStorage
               storage: sessionStorage,
               // []意味着没有状态被持久化(默认为undefined，持久化整个状态)
               paths: [],
             }
         ]
      }
  })             

总结：

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