使用vuex实在是增加心智负担 , 所以我选择pinia , 简记一下使用 pinia

install

选择 yarn 安装 , 版本号 2.0.9

yarn add pinia

# or with npm

npm install pinia

useStore

src/stores/useMainStore.js

使用 defineStore 创建一个 Store

  • 传入第一个参数 (string) , 唯一的名称
  • 传入第二个参数 , 就像下面写的那样 state 返回一个对象
import { defineStore } from 'pinia'

export const useMainStore = defineStore("maomao", {
    state: () => ({
        count: 1,
    }),

    getters: {
        doubleCount(state) {
            return state.count * 2
        }
    },

    actions: {
        countPlus() {
            this.count += 10000;
        }
    }
})

main.js

src/main.js

import { createPinia } from 'pinia'

const app = createApp(App)

app.use(createPinia())

App.vue

state & getters

使用 storeToRefs(useMainStore()) 可以解构 state & getters 里的属性 。

<script setup>

import { storeToRefs } from 'pinia'
import { useMainStore } from '@/stores/useMainStore';

const { count,doubleCount } = storeToRefs(useMainStore())

console.log(count.value);  // 1
console.log(doubleCount.value);  // 2

</script>

actions

useMainStore() 解构 actions 里的方法 。

<script setup>

import { storeToRefs } from 'pinia'

const { countPlus } = useMainStore()

console.log(countPlus);  //function

</script>
最后修改:2022 年 01 月 08 日
如果觉得我的文章对你有用,请随意赞赏