手把手教你学会pinia（vue3）_app.mount()里导入-优快云博客

本文详细介绍了如何在Vue应用中使用Pinia库创建和导入store，展示了store的定义、状态管理和action操作，适合初学者理解状态管理在前端开发中的实践。

注意： app.mount('#app')必须要放到最后，否则你会收获这样的一个错误

4.文件中引入store（哪个文件想要访问store中的数据就在哪个文件中引入）

1.下载

yarn add pinia
# or with npm
npm install pinia

2. main.js中引入

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

注意： app.mount('#app')必须要放到最后，否则你会收获这样的一个错误

3.定义一个store（新建一个js文件）

import { defineStore } from 'pinia'

 const userStore = defineStore({
    id: 'userInfo',  // 命名，唯一
    state: () => {
        return {
            userInfo: {}
        }
    },
    actions: {
        setUserInfo(data) {
            // 可直接通过this访问state属性
            this.userInfo = data;
        },
    }
})
export default userStore

4.文件中引入store（哪个文件想要访问store中的数据就在哪个文件中引入）


<script>
//这里的@/store/user是我自己创建的文件
import  userStore  from "@/store/user"
export default {
  setup(){
    const store = userStore();
    console.log(store,"store");
  }
}
</script>