vue3中的pinia的使用方法

vue3中的pinia的使用方法

pinia的安装方法

npm install pinia

在src里面新建一个文件夹 store，在store里面新建一个index.js文件 引入pinia

import { createPinia } from 'pinia'
const store = createPinia()
export default store

在main.js里面引入store进行全局挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(router).use(store).mount('#app')

在store里面创建counter.js和shop.js 用于模块化管理
counter.js的代码如下

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 1,
      name: '张三'
    }
  },
  //相当于计算属性 而且具有缓存
  getters: {
    changeNum() {
      return this.num + 100
    }
  },
  actions: {
    //这里可以添加同步和异步的方法
    upNum(val) {
      this.num += val
    }
  }
})

shop.js的代码如下

import { defineStore } from 'pinia'
export const shop = defineStore('shop', {
  state: () => {
    return {
      shopList: ['a', 'b', 'c']
    }
  }
})

在App.vue组件使用store 代码如下

<template>
  <div>
    <h4>{{ changeNum }}</h4>
    <h4>{{ name }}{{ num }}</h4>
    <button @click="btn">点击按钮修改</button>
    <button @click="reset">重置数据</button>
    <button @click="add">action方法</button>
    <hr />
    <h3>shop的数据:{{ shopList }}</h3>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { counter } from './store/counter'
import { shop } from './store/shop'
let countStore = counter()
let shopStore = shop()
let { name, num, changeNum } = storeToRefs(countStore)
let { shopList } = storeToRefs(shopStore)
const btn = () => {
  // name.value = '李四'
  // num.value = 4
  //批量修改state的数据
  countStore.$patch((state) => {
    num.value = 3
    name.value = '王五'
  })
}
//重置数据
const reset = () => {
  countStore.$reset()
}
const add = () => {
  countStore.upNum(2)
}
</script>

Pina和Vuex有什么区别

区别:
1. pinia没有mutations，只有:state、getters、actions
2. pinia分模块不需要modules(之前vuex分模块需要modules)
3. pinia体积更小(性能更好)
4.使用pinia可以在某个组件中直接修改pinia中state的数据

Pinia的持久化存储
Pinia的版本在3以上可以安装pinia-plugin-persistedstate插件作为持久化状态管理

npm i pinia-plugin-persistedstate

在index.js里面的配置引入

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
store.use(piniaPluginPersistedstate)//挂载

在在store里面 counter.js 使用

  //配置持久化存储变量
  persist: {
    num: 1
  }