pinia之菠萝

优点：

1.完整的TS支持

2.足够轻量，压缩后的体积只有1kb左右

3.去除了mutations模块，在action模块中可以编写异步代码和同步代码

使用步骤：

基本操作

1.下载：yarn add pinia

2. 创建pinia并导出

import { createPinia} from "pinia"

export const pinia = createPinia()

3.引入并挂载

import { pinia } from "./store/index"

createApp(App).use(pinia).use(router).mount('#app')

初始化store仓库

1.创建

import { defineStore } from "pinia"

// 第一个参数是仓库名，第二个参数是个对象，里面包含state，getters和actions
export const useTestStore = defineStore('test', {
  state() { 
    return {
      value:23,
      name:'小曼'
    }
  },
  getters: {},
  actions: {}
})

2.使用

修改state中数据的方法

在组件中修改

1.通过store.属性名的方式直接修改

2.通过store.$patch方法修改

借助actions修改

组件中

仓库中

export const useTestStore = defineStore('test', {
  state() { 
    return {
      value:23,
      name:'小曼'
    }
  },
  getters: {},
  actions: {
    changeValue() { 
      this.value++
    }
  }
})

相关API

$reset

作用：重置state中的所有值

const reset = () => {
  testStore.$reset();
};

$subscribe

作用：监听state中的值，一旦值改变，则调用该方法

testStore.$subscribe((args, state) => {
  console.log(args, state);
});

$onAction

作用：监听是否调用action中的方法，一旦调用，则调用该方法

testStore.$onAction((args) => {
  console.log(args);
});

$patch

作用：修改state中的值

1.通过函数修改

const changeValue = () => {
  testStore.$patch((state) => {
    state.value++
   })
};

2.通过对象修改

const changeValue = () => {
  testStore.$patch({value:34,name:'张三'});
};

$state

作用：覆盖原来state中的值（必须每个属性都写上）

const changeValue = () => {
  testStore.$state = {value:666,name:"王五"}
};

实现数据持久化

插件内部

import { PiniaPluginContext } from "pinia"

// 初始化时，有多少个store，就调用多少次
export function persistence(content: PiniaPluginContext) {
  // 获取当前store名对应的数据
  const currentStore = JSON.parse(localStorage.getItem(content.store.$id) || "{}")
  // 更新当前store中state的值
  content.store.$patch(currentStore)

  // 每次state中的数据发生变化，都会调用该函数
  content.store.$subscribe((_store, state) => {
    // 将变化后的数据存储到本地中（storeId是仓库名）
    localStorage.setItem(_store.storeId, JSON.stringify(state))
  })
}

主文件中，引入插件并使用

import { createPinia } from "pinia"
// 引入
import { persistence } from "./plugins/persistence"

const pinia = createPinia()
// 使用持久化插件
pinia.use(persistence)

export { pinia }