vue3使用pinia

安装pinia

npm install pinia
//数据持久化
npm install pinia-plugin-persistedstate

配置pinia

三个核心： state、getters、actions，等同于组件的data、computed、methods。

pinia没有mutations，只有：state、getters、actions

pinia可以直接修改state数据，无需像vuex一样通过mutations才可以修改

在action中可以通过this访问整个store实例的所有操作

Pinia不需要像Vuex一样使用modules分模块，Pinia可在store目录中直接定义对应模块就可以了

import { defineStore } from 'pinia'
​
export const useStore = defineStore('main', {
  state: () => {
    return {
      tableList: [],
       name:'lf',
       money:0
    }
  },
  actions:{
      addCount( val ){
        this.money += val;
    }
  },
  getters:{
      countChange(  ){
        return this.money + 10000;
    }
  },
  // 所有数据持久化
  // persist: true,
  // 持久化存储插件其他配置
  persist: {
    // 按需存储 state/ref
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: 'storekey',
    // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage,
    // 🎉按需持久化，默认不写会存储全部
    paths: ['tableList'],
  },
})
​
​

main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
//数据持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const app = createApp(App) // 生成 Vue 实例 app
const pinia = createPinia();
app.use(pinia)
pinia.use(piniaPluginPersistedstate);

使用

• 存储数据

//存储/修改数据
import { useStore } from "@/store/index.js";
​
//pinia状态共享
const store = useStore();
const getList = () => {
  axios.get("/mock/mockList").then((res) => {
    // 获取数据
    //存储数据方法
    // 方法一
    // store.tableList = res.data
      
    //方法二
    store.$patch({
      tableList: res.data,
    });
  });
};
const update  = ()=>{
   //批量更新
    store.$patch(state=>{
        state.money++;
        state.name = '有钱人';
    })
}
//触发actions
const add = ()=>{
    store.addCount(1000000000);
}

• 获取列表数据

<template>
    <div>
        <el-table
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="50" />
          <el-table-column prop="id" label="ID"></el-table-column>
        </el-table>
​
        <div>
         {{ countChange }}
         {{ countChange }}
        </div>
    </div>
</template>
​
import { useStore  } from "@/store/index.js";
import { storeToRefs } from 'pinia';
const store = useStore ();
let {tableList , countChange} = storeToRefs(store)
//在模板里直接使用 tableList  countChange