首先 将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>