pinia+vue3

首先 将pinia挂在app上（main.js）

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

createApp(App).use(store).use(router).use(pinia).use(vant).mount("#app");

在src中创建一个文件夹store，再建一个index.js文件，使用defineStore（）定义store

import { defineStore } from "pinia";
import { computed, ref } from "vue";

// 一下两种方法选其一

// option store
export const useTodoStore = defineStore("todo", {
  state: () => {
    return {
      age: 30,
    };
  },
  // 相当于计算属性 computed
  getters: {
    gettersAge(state) {
      return state.age + 5;
    },
  },
  // 相当于methods 定义函数
  actions: {
    addAge() {
      // this指向对应的state
      this.age++;
    },
  },
});

// setup store
export const useCounterStore = defineStore("counter", () => {
  const counter = ref(10); // state
  // getters
  const gettersCounter = computed(() => {
    return counter.value + 5;
  });
  // actions
  function addCounter() {
    counter.value += 2;
  }
  return {
    counter,
    gettersCounter,
    addCounter,
  };
});

在页面上

  <div>todo--{{ name }}</div>
  <h2>{{ todoStore.age }}</h2>
  <h3>{{ todoStore.gettersAge }}</h3>
  <button @click="todoStore.addAge">+1</button>
  <hr />
  <h4>{{ counterStore.counter }}</h4>
  <h5>{{ counterStore.gettersCounter }}</h5>
  <button @click="counterStore.addCounter">+2</button>
<script>
import { useCounterStore, useTodoStore } from "../store/index.js";

export default {
  setup() {

    let counterStore = useCounterStore();
    let todoStore = useTodoStore();

    return {
      counterStore,
      todoStore,
    };
  },
};
</script>