vue3 pinia学习计划

1.安装

npm install pinia

main.js中：

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(ElementPlus)
app.use(router)

app.mount('#app')

2.Store

建一个store文件夹，建一个js文件状态管理库，以后都在里面管理。

使用defineStore(),第一个参数是名字，第二个参数是setup函数跟option对象

2.1.State

state就是一个存储数据的地方，然后可以在 store 的任何位置访问和修改数据。

2.3 getter

getter用来获取派生对象，像computed那样

2.4 Action

相当于组件中的方法，同步的，返回一个promise对象

3.创建

import { defineStore } from 'pinia'
import { updateArsenal } from '@/api'

const useMyStore = defineStore('arsenal',{ 
  state: () => ({
    arsenal:'',
  }),
  getters: {
    getArsenal() {
      return this.arsenal
    },
    linkArsenal: (state) => state.arsenal + 'gunner',
  },
  actions: {
    setArsenal(value) {
      this.arsenal= value
    },
    async updateArsenal() {
      const newData= await updateArsenal()
      this.arsenal = newData.data
    },
  },
})
export default useMyStore 

4.使用

<template>
  <div>{{ arsenal }}</div>
</template>

<script>
import { defineComponent } from 'vue'
import { useStore } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore('arsenal')

    return {
      arsenal: store.setArsenal(),
    }
  },
})
</script>

5.一些使用

5.1 storeToRefs 

解构语法调用store中的数据,只能用于数据、计算属性，不能用于方法。

<template>
  <div>数据--{{ counterStore.arsenal }}</div>
</template>

<script setup>
    import { useArsenalStore } from "./stores/arsenal"
    import { storeToRefs } from "pinia"
    const { arsenal }  = storeToRefs(useArsenalStore ())	//创建store实例
</script>

5.2 异步调用

<template>
  <div>数据--{{ counterStore.arsenal }}</div>
  <button @click="arsenalStore .getArsenal">获取数据</button>
</template>

<script setup>
    import { useArsenalStore } from "./stores/arsenal"
    const arsenalStore = useArsenalStore ();
</script>