pinia 使用

最新推荐文章于 2024-10-06 11:16:09 发布

MjsCool

最新推荐文章于 2024-10-06 11:16:09 发布

阅读量98

点赞数

文章标签： javascript vue.js 前端框架前端

本文链接：https://blog.csdn.net/Mjs1998/article/details/126296816

版权

学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

pinia

安装

npm i pinia -S

配置pinia

import { defineStore } from "pinia";

import { Names } from "./store-name";
export const useMystore = defineStore(Names.TEST, {
  state: () => ({
    current: 1,
    name: "mjs",
  }),
  getters: {
    getName: (state) => {
      return state.name + "mm";
    },
  },
  actions: {
    setCurrent(num:number) {
      this.current = num;
    },
  },
});

修改state的四种方式

1. 直接修改  const mystore = useMystore()
			mystore.name = 'xxx'
2.$patch   mystore.$patch({name:'xxx'})
3.$patch(()=>{})   mystore.$patch(state=>{state.name='xxx'})
4.使用actions

state的响应式解构

import { useMystore } from "../stores/index";
import { storeToRefs } from "pinia";
const myStore = useMystore();
const { current, name } = storeToRefs(myStore);