pinia 的使用方法

使用方式（选项式）

1、在 mian.js 导入 pinia 里的 createPinia 函数。

2、app.use 这个 createPinia 函数的返回值。

// main.js

import { createPinia } from 'pinia';

app.use(createPinia());

3、创建一个 js 文件（该文件保存着共享的数据，共享的方法），惯例上会叫该 js 文件为 store。

4、在 store 文件里，从 pinia 里导入 defineStore 函数（该函数是定义 store 的函数）。

5、在 defineStore 函数的第二个参数定义共享的数据和方法。

6、用 export 导出 defineStore 函数的返回值，该返回值是一个函数，在这里我命名该函数为 useUserStore。

// userStore.js

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {

    state: () => {
        return {
            name: '李小明',
            age: 18,
            hobby: 'basketball'
        }
    },

    getters: {
        // this 形式
        // doubleAge() {
        //     return this.age * 2
        // },

        doubleAge: (state) => {
            return state.age * 2
        }
    },

    actions: {
        changeAge() {
            this.age = 16
        },
    }

});

7、在需要该 store 里的数据和方法的 vue 文件里导入该 useUserStore 函数。

8、在 vue 文件里使用 setup 函数，在 setup 函数里运行一次 useUserStore 函数，并把该 useUserStore 函数的返回值赋予给一个变量，该变量保存着上面 defineStore 函数定义的共享的数据和方法。

10、在 setup 函数里 return 该变量，该变量就会被 vue 实例代理（即 this）。

温馨提示： store 会保存在组件实例的 _pStores 属性里。

整体演示

userStore.js（全局状态文件）

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
    // 箭头函数
    state: () => {
        return {
            name: '李小明',
            age: 18,
            hobby: 'basketball'
        }
    },

    // 普通函数
    // state() {
    //     return {
    //         name: '李小明',
    //         age: 18,
    //         hobby: 'basketball'
    //     }
    // },

    getters: {
        // this 形式
        // doubleAge() {
        //     return this.age * 2
        // },

        // 参数形式
        doubleAge: (state) => {
            return state.age * 2
        }
    },

    actions: {
        changeAge() {
            this.age = 16
        },
    }
});

App.vue

子组件 HelloWorld.vue

State

state 的值是一个函数。

state 相当于 data，是我们需要在组件之间共享的数据。

普通方法

state() {
    return {
        name: '李小明',
        age: 18,
        hobby: 'basketball'
    }
},

箭头函数

state: () => {
    return {
        name: '李小明',
        age: 18,
        hobby: 'basketball'
    }
},

在 TypeScript 中使用箭头函数将自动推断这些属性的类型。

Getters

getters 的值是一个对象。

getter 相当于计算属性，计算的结果会被缓存下来，只有当依赖的值发生改变才会重新计算。

使用第一个参数 state 可以访问 state 

getters: {
    doubleAge(state) {
        return state.age * 2
    },
}

也可以在普通函数里使用 this，从而访问到整个 pinia 实例（所以可以在 getter 里访问另外的 getter），

getters: {
    doubleAge() {
        return this.age * 2  // this（pinia 实例） 代理了 state 里的属性
    },
}

但是在箭头函数里，因为箭头函数里 this 的指向问题，所以箭头函数只能使用第一个参数 state 来访问 state，

getters: {
    doubleAge: (state) => {
        return state.age * 2
    }
}

Actions

actions 的值是一个对象。

action 相当于方法。

普通函数可以通过 this 访问 pinia 实例

actions: {
    changeAge() {
        this.age = 16
    },
}

因为箭头函数的 this 的问题，Action 里使用箭头函数访问 pinia 实例是不行的。