vue3 pinia使用方式

安装

# 使用 npm
npm install pinia@next
# 使用 yarn
yarn add pinia@next

代码使用

• store代码

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

const myStore = defineStore('my', () => {

  const my1 = ref<number>(0)


  const my2 = ref<number>(1)



  const setMy1 = () => {
    my1.value++;

    console.log(my1, "my1-in-store")
  }


  const setMy2 = () => {
    my2.value++;
  }


  const my1AndMy2 = computed(() => {
    return my1.value + my2.value;
  })



  return {
    my1,
    my2,
    setMy2,
    setMy1,
    my1AndMy2
  }


})

export default myStore

• vue代码使用

<template>
  <div class="box">
    <div>demo:{{ myStore.my1 }}</div>
    <div>demo2:{{ myStore.my2 }}</div>
    <el-button type="primary" size="default" @click="setMy1()"
      >setMy1</el-button
    >
    <el-button type="primary" size="default" @click="setMy2()"
      >setMy2</el-button
    >
    <div>my1AndMy2:{{ my1AndMy2 }}</div>

    <el-button type="primary" size="default" @click="resetStore"
      >reset store</el-button
    >
  </div>
</template>
<script lang="ts" setup>
// import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { storeToRefs } from "pinia";

import useMyStore from "@/stores/my";
const myStore = useMyStore();

console.log(myStore, "myStore");

const { setMy1, setMy2 } = myStore;

//需要storeToRefs 转化，才能结构出ref特性的值，要不然直接结构会失去响应式ref特性
const { my1, my2, my1AndMy2 } = storeToRefs(myStore);

console.log(my1, "my1");
console.log(my2, "my2");

const resetStore = () => {
  // $reset可以实现重置store，但是需要options api写法，如果是组合式写法，需要main.js 写入对应的重置操作方式，详情见main.js
  myStore.$reset();
};
</script>
<style lang="stylus" scoped></style>

• main.js 注册pinia

import "./assets/main.css";
import "./components/myts";
import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

const pinia = createPinia();
//以下方式主要是为了使pinia的组合式方式写法的重置调用可以实现
pinia.use(({ store }) => {
  const initialState = JSON.parse(JSON.stringify(store.$state));
  store.$reset = () => {
    store.$patch(initialState);
  };
});

const app = createApp(App);

app.use(pinia);
app.use(ElementPlus);
app.use(router);

app.mount("#app");