pinia的学习和使用

什么是pinia?

• pinia 是 Vue的最新一代的轻量级状态管理插件，它允许跨组件/页面共享状态。
• pinia 和 vuex 具有相同的功效，用法上有些差别
• 设计使用的是 Composition api，更符合vue3的设计思维
• dev-tools 支持 pinia，提供更好的开发体验

与 Vuex 的比较

• 去除 mutations，只有state、actions、getters
  在vuex中，mutations支持同步、actions支持异步，且state中的数据只能通过mutations修改，显得十分冗长
  在pinia中，action支持同步、异步修改state数据
• pinia没有modules配置，可以构建多个stores
• 能更好的的支持typescript
• 极其轻量，约1kb

用法 ( 以vue3为例 )

安装

yarn add pinia
# 或者使用 npm
npm install pinia

在main.ts中引入

import { createPinia } from 'pinia'

app.use(createPinia())

定义 Store

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
  state:()=>({
    count: 10
  }),
  getters:{ // 相当于vue里面的计算属性，可以缓存数据

  },
  actions:{ // 可以通过actions 方法，改变 state 里面的值。
      
  }
})

使用 store

import { useStore } from '@/stores/index'

export default {
  setup() {
    const store = useStore()

    return {
      // 您可以返回整个 store 实例以在模板中使用它
      store,
    }
  },
}

state 数据操作

1、直接修改

const store = useStore();
const add = () => {
       store.count ++ 
 }

2、patch 方法传递一个函数来修改数来修改($patch 可以同时修改 多个数据。)

const store = useStore();
const add = () => {
  store.$patch({
    count: store.count + 1,
  })
}

3 、patch 方法传递一个函数来修改。

const store = useStore();
const add = () => {
      store.$patch(state => {
         state.count++;
         state.num++;
      })
}

4、actions 里面修改数据
store

actions:{
    piniaAdd(){ 
       this.count++;
       // 特别注意：在这里this指向的就是当前的实例化出来的对象，
       // piniaAdd 该函数如果换成箭头函数的话，this 指向    就会发生 改变，不能再使用 this.count++ 了
    }
  }

页面

const store = useStore();
const add = () => {
      store.piniaAdd();
}

5、重置store

const store = useStore();
const resetStore= () => {
      store.$reset()
}

6、监听store

const store = useStore();
store.$subscribe((mutations,state)=>{
  console.log(mutations,state)
});

actions和getters的使用

store

actions: {
    piniaAdd(){ 
       this.count++;
       // 特别注意：在这里this指向的就是当前的实例化出来的对象，
       // piniaAdd 该函数如果换成箭头函数的话，this 指向    就会发生 改变，不能再使用 this.count++ 了
    }
  },
 getters: {
    doubleCount: (state) => state.count* 2,
  }

总结

相较于vuex

• 省去了mutation，大大简化了操作，
• 使用组合式api设计，使得对数据的操作和vue3一样，省去了commit、dispatch、getters等繁琐的操作

store.state.变量名
store.commit("方法名", 参数)
store.dispatch("方法名", 参数)
store.getters["方法名"](参数)

pinia 固化插件的使用

• 安装

npm i pinia-plugin-persist --save --include=dev
// 或者使用 yarn 安装
yarn add pinia-plugin-persist

• 引入（main.ts）

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia';
// 下面是我们安装的固化插件。
import piniaPersist from 'pinia-plugin-persist'
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPersist);
// 特别注意：固化插件是 pinia.use 并不是 app.use
app.use(pinia);

app.mount('#app')

• store模块中

import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
  state(){
    return {
      count: 10,
      num: 20
    }
  },
  persist: { //  固化插件
    enabled: true, // 开启存储
     strategies: [ // 指定存储的位置以及存储的变量都有哪些，该属性可以不写，
        //在不写的情况下，默认存储到 sessionStorage 里面,默认存储 state 里面的所有数据。
      { storage: localStorage, paths: ["count"] },
      // paths 是一个数组，如果写了 就会只存储 count 变量，当然也可以写多个。
    ]
  },
  getters:{

  },
  
  actions:{
    piniaAdd(){
       this.count++;
    }
  }
})