pinia笔记

pinia中action支持同步和异步
pinia中只有state、getter、action，抛弃了Vuex中的Mutation
pinia中每个store都是独立的，互相不影响

安装

npm install pinia -S

引入，编辑main.js

import { createPinia } from "pinia";
const pinia = createPinia();

const app = createApp(App);
app.use(pinia);

import { defineStore } from 'pinia'

export const usersstore = defineStore('users', {
    state: () => {
        return {   //state的值定义一定要这么写
            name: "111小猪课堂",
            age: 25,
            sex: "男",
        };
    },
    getters: {
        getAddAge: (state) => {
          return state.age + 100;
        },
    },
    actions: {
        saveName(name) {
          this.name = name; //修改state的name值
        },
    },
})

state

<div>{{age}}</div>
<button @click="changebtn">点击</button>
import {usersstore} from "@/store/test";

//调用：
var {name,age,sex} = usersstore()
var age = ref(age)


//修改数据不响应
var changebtn = ()=>{
  usersstore().age=usersstore().age+1  //数据修改成功，但不响应
  console.log(usersstore())
}

//推荐，修改数据可以响应
import {storeToRefs} from 'pinia'
var {name,age,sex} = storeToRefs(usersstore()) //在外面包裹一层storeToRefs，
var age = ref(age)
usersstore().age=usersstore().age+1  //数据修改成功，同时也能响应


//批量修改数据
var changebtn = ()=>{
    usersstore().$patch({  //缺点就是不需要修改的数据也要写出来
      name: "111小猪课堂",
      age: 29,
      sex: "男",
    })
    
    usersstore().$patch((state) => { //这样就可以修改只想改的部分了
      state.age=state.age+1
      state.sex="女"
    })
    
    usersstore().$state = { counter: 666, name: '张三' } //替换整个state数据         
}



var changebtn = ()=>{
  usersstore().$reset(); //重置所有数据
}

getters

export const usersstore = defineStore('users', {
    state: () => {
        return {   //state的值定义一定要这么写
            name: "111小猪课堂",
            age: 25,
            sex: "男",
        };
    },
    getters: {
        getAddAge: (state) => { //相当于在state新增了一个getAddAge变量
          return state.age + 100;
        },
        getNameAndAge: (state) => {
          return this.name + this.getAddAge; // 调用其它getter
        },
    },
})

接收外来参数

getters: {
        getAddAge: (state) => { //相当于在state新增了一个getAddAge变量
          return (num) => state.age + num;
        }
},

调用
{{ usersstore().getAddAge(2) }}

actions: {
        saveName(name) {
          this.name = name; //修改state的name值
        },
},

调用

// 调用actions方法
const saveName = () => {
  usersstore().saveName("我是小猪");
};

数据持久化

也就是vuex把数据存到localStorage中

npm i pinia-plugin-persistedstate -S

\src\store\index.js

import { createPinia } from "pinia";
const pinia = createPinia();
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'


pinia.use(piniaPluginPersistedstate)

export default pinia

\src\store\user.js

.
.
.
state: () => {
    return {
        token: getToken(),
        menus: [],
    };
},
getters: {
  
},
actions: {
   
},
// persist:true, //将全部数据缓存到localStorage
persist: {
    // 自定义字段名
    key: 'mychannel',
    // 只是将token字段持久化存储
    paths: ['token']
}

https://zhuanlan.zhihu.com/p/533233367