Pinia基本使用

下载

yarn add pinia
# or with npm
npm install pinia

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')必须要放到最后

定义一个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

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

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