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

yarn add pinia  (yarn包管理器)

　　npm install pinia (npm包管理器)

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

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文件中配置为@

4、state，即数据源

• 定义state对象

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

• state对象的获取

• state对象的重置

• state对象的修改

  • direct，即直接修改

     

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

      

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

     

  • 整体替换

  • 订阅状态

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对象下的方法

  　　 　　

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对象下的方法

  　　 

• 订阅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: [],
  }
  ]
  }
  })

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