pinia详细使用方法

Pinia

安装

npm i pinia

使用 - VCA

// main.js 全局注册pinia
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)

在store文件夹下，创建各个页面的xxxStore.js文件

// xxxStore.js
import { defineStore } from 'pinia'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
  // option Store写法
  state: () => ({
      isTabberShow: false
  }),
    
  actions: {
      change(payload) {
          // 不需要this.state.isTabberShow
          this.isTabberShow = payload
      }
  }
})

// 页面中
import useAlertsStore from './store/xxxStore.js'
import { storeToRefs } from 'pinia'

const store = useAlertsStore()
// 将state属性直接挂载到store上了，所以可以直接访问
store.isTabberShow
// 生成的store是一个reactive包装的对象，对其解构之后能拿到其值，但却失去了响应式
const { isTabberShow } = useAlertsStore() // 错误写法
// 可以通过将reactive转成ref形式使用
const { isTabberShow } = storeToRefs(store) // 正确写法

state – option stroe写法

onBeforeMount(() => {
	// 可以直接修改状态
    store.isTabberShow = true
    // 也可以通过$patch修改状态
    // 相当于一个补丁,会把$patch内的对象与xxxStore.js中state返回的对象进行合并
    store.$patch({
        isTabberShow: true
    })
    // 将其重置为初始值 false
    store.$reset()
    // 也可以通过action的方法修改状态
    store.change(true)
})

actions – option stroe写法

// xxxStore.js

state: () => ({
   list: [] 
}),

actions: {
    async getList() {
        const res = await axios('/api/xxx')
        // 能直接访问到state中的属性
        this.list = res.data
    }
}

// 页面中
const store = useListStore()

onBeforeMount(() => {
	// 调用action中的方法，
    // 将state属性直接挂载到store上了，所以可以直接访问，直接用store.list访问其值
	store.getList()
})

getters – option stroe写法

// xxxStore.js

getters: {
    // 不传参
    filterList(state) {
        return state.list.filter(item => item.id === 1)
    }
    // 传参时其返回值必须要是一个函数
    filterList(state) {
        return (type) => {
            state.list.filter(item => item.id === type)
        }
    }
}

// 页面中
<div v-for="item in store.filterList(type)" :key="item.id">
    {{ item.name }}
</div>

setup stroe写法

// xxxStore.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', () => {
    // ref包装定义的就是state
    const isTabberShow = ref(false)
    const list = ref([])

    const change = (value) => {
        isTabberShow.value = value
    }
    const getList = async() => {
        const res = await axios('/api/xxx')
        // 能直接访问到state中的属性
        list.value = res.data
    }
    // 必须返回一个函数
    const filterList = computed(() =>
        (type) => {
            list.value.filter(item => item.id === type)
        }
    )
    
    return {
        isTabberShow,
        change,
        filterList
    }
})

在VOA中使用辅助函数

import useAlertsStore from './store/xxxStore.js'
import { mapState, mapActions } from 'pinia'

computed: {
    ...mapState(useAlertsStore, ['isTabberShow'])
}
methods: {
    ...mapActions(useAlertsStore, ['change'])
}