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）。

<template>
    <div>
        <p>姓名：{{ userStore.name }}</p>
        <p>年龄：{{ userStore.age }}</p>
        <p>爱好：{{ userStore.hobby }}</p>
        <p>双倍年龄：{{ userStore.doubleAge }}</p>
        <p>计算属性：{{ getName }}</p>
        <div>
            <button @click="userStore.changeAge">userStore 的 changeAge 方法，点击改变年龄</button>
        </div>
        <div style="margin: 10px 0;">
            app 的按钮<button @click="consoleName" style="margin-left: 5px;">点击我</button>
        </div>
    </div>
</template>
<script>

import { useUserStore } from './store/userStore.js';

export default {

    setup() {
        const userStore = useUserStore();

        return {
            userStore // 导出 userStore，userStore 会被 vue 实例代理，即 this。
        }
    },

    data() {
        return {
            
        }
    },

    methods: {
        consoleName() {
            console.log(this.userStore.name); // 通过 this 访问 userStore
        }
    },

    computed: {
        getName() {
            return this.userStore.name // 通过 this 访问 userStore
        }
    }

}


</script>

<style></style>

温馨提示： 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

<template>
    <div>
        <p>姓名：{{ userStore.name }}</p>
        <p>年龄：{{ userStore.age }}</p>
        <p>爱好：{{ userStore.hobby }}</p>
        <p>双倍年龄：{{ userStore.doubleAge }}</p>
        <p>计算属性：{{ getName }}</p>
        <div style="margin: 10px 0;">
            <button @click="userStore.changeAge">userStore 的 changeAge 方法，点击改变年龄</button>
        </div>
        <div style="margin: 10px 0;">
            app 的按钮<button @click="consoleName" style="margin-left: 5px;">点击我</button>
        </div>

        <div style="border: 1px solid skyblue;padding: 10px ;">
            <HelloWorld></HelloWorld>
        </div>

    </div>
</template>
<script>

import { useUserStore } from './store/userStore.js';

import HelloWorld from './components/HelloWorld.vue';

export default {

    setup() {
        const userStore = useUserStore();

        return { userStore }
    },

    components: {
        HelloWorld
    },

    mounted() {
        
    },

    data() {
        return {

        }
    },

    methods: {
        consoleName() {
            console.log(this.userStore.name);
        }
    },

    computed: {
        getName() {
            return this.userStore.name
        }
    }
}


</script>

<style></style>

子组件 HelloWorld.vue

<template>
    <p>我是子组件</p>
    <p>userStore.age 等于 {{ userStore.age }}</p>
    <button @click="changeAge">我是子组件按钮</button>
</template>

<script>

import { useUserStore } from '../store/userStore.js';

export default {

    setup() {
        const userStore = useUserStore(); // 整体导出
        const changeAge = userStore.changeAge; // 单独导出一个方法
        return {
            userStore,
            changeAge
        }
    },

    data() {
        return {
        }
    },

    methods: {

    }
}
</script>

<style></style>

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 实例是不行的。