vue3中pinia用法

安装

npm install pinia --save

1.在main.js中

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();

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

2.创建文件 store/index.js

也存在另一种定义 store 的可用语法。与 Vue 组合式 API 的 setup 函数 相似，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。我感觉这种形式写着更方便简单。

import { defineStore } from "pinia";
import { ref } from 'vue'

export const useStore = defineStore('main',() => {
    const searchValue = ref('');
    const count = ref(0);
    function onSearchValue() {
        console.log(searchValue,'这里是store');
    }

    return { searchValue,onSearchValue }
})

在 Setup Store 中：

• ref() 就是 state 属性
• computed() 就是 getters
• function() 就是 actions

3.页面中的使用

    
数据显示：{{store.searchValue}}
    pinia事件

    
数据显示：{{store.searchValue}}
    pinia事件
    赋值