Pinia再学习

Pinia的简单使用~

0.【起步】

0.1【起步__安装pinia】

npm install pinia
// or
yarn add pinia

0.2【起步__项目引入】

// main.ts
import { createApp  } from 'vue';
import App from "./App.vue";
import { createPinia } from 'pinia';
const Pinia = createPinia();
const app = createApp(App);
app
  .use(Pinia)
    .mount("#app")

0.3【起步__创建store】

// 路径：srec / store / userStore.ts
import { defineStore } from 'pinia';
// defineStore 第一个参数 name 是必须的，代表 此 store 唯一的 id 
// Pinia 使用此 id 来将 store 连接到 devtools
export const useUserStore = defineStore('user', {
  // 配置属性
})

1.【使用】

1.1【使用__添加 store 成员】

这里需要注意

// 在配置属性中添加 state 属性, state 属性内就是基本数据
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  // state 用来存放状态
  state: () => {
    return {
       userName： '一位路过的假面骑士_',
         age: 18,
         sex: '男'
    }
  }
})

1.2【使用__在页面使用 store 】

1.2.1【使用__在页面直接使用 store】

// 路径: src / App.vue
<script setup lang="ts">
  // 引入 store
    import { useUserStore } from "../src/store/user";
    const userStore = useUsersStore();
    console.log(store);
</script>
<template>
  <h1>{{ userStore.name }}</h1>
  <h2>{{ userStore.age }}</h2>
  <h3>{{ userStore.age }}</h3>
</template>

1.2.2【使用__解构使用store】

与 vue3 解构使用变量一样，pinia 解构使用 store 也会失去响应式 ，因此需要使用 storeToRefs 将 store 包裹起来，它将为任何响应式属性创建 refs ，因为被包裹为 Ref 对象，因为在模板（template）中使用不需要 .value ，但是在 script 中直接使用还是需要 .value 取值

// 路径: src / App.vue
<script setup lang="ts">
  // 引入 store
    import { useUserStore } from "../src/store/user";
    import { storeToRefs } from 'pinia';
    const userStore = useUsersStore();
    const { name, age, sex } = storeToRefs(userStore);
    console.log(store);
    cosnole.log(name.value, "store中name属性的值") // 需要使用 .value 取值
</script>
<template>
  //  在模板中使用不需要 .value，因为会自动解包 ref
  <h1>{{ name }}</h1>
  <h2>{{ age }}</h2>
  <h3>{{ age }}</h3>
</template>

2.【修改】

2.1【修改__单一state修改】

// 路径: src / App.vue
<script setup lang="ts">
  // 引入 store
    import { useUserStore } from "../src/store/user";
    import { storeToRefs } from 'pinia';
    const userStore = useUsersStore();
    const { name, age, sex } = storeToRefs(userStore);
    console.log(store);
    const updataName = () => {
    name.value = '雨一直下，气氛不算融洽'
  }
</script>
<template>
  <h1>{{ name }}</h1>
  <h2>{{ age }}</h2>
  <h3>{{ age }}</h3>
  <button @click="() => name = '张三'">修改name的值</button>
  // or
  <button @click="updataName">修改name的值</button>
</template>

2.2【修改_批量更改state】

使用 $patch属性可批量、多个的修改 state

// 路径: src / App.vue
<script setup lang="ts">
  // 引入 store
    import { useUserStore } from "../src/store/user";
    import { storeToRefs } from 'pinia';
    const userStore = useUsersStore();
    const { name, age, sex } = storeToRefs(userStore);
    const multipleChange = () => {
   userStore.$patch({
     name: '坐地铁上班的假面骑士_',
     age: 20,
     sex: '男'
   }) 
  }
</script>
<template>
  <h1>{{ name }}</h1>
  <h2>{{ age }}</h2>
  <h3>{{ age }}</h3>
  <button @click="multipleChange">使用$patch批量修改state</button>
</template>

2.3【修改__重置整个 store】

使用 $reset() 方法可以将整个 store重置为初始化时的状态

// 路径: src / App.vue
<script setup lang="ts">
  // 引入 store
    import { useUserStore } from "../src/store/user";
    import { storeToRefs } from 'pinia';
    const userStore = useUsersStore();
    const { name, age, sex } = storeToRefs(userStore);
    const resetStore = () => {
    // $reset 可以将 store 重置为 初始化状态
    userStore.$reset()
  }
</script>
<template>
  <h1>{{ name }}</h1>
  <h2>{{ age }}</h2>
  <h3>{{ age }}</h3>
  <button @click="resetStore">使用$patch批量修改state</button>
</template>

3.【getters属性】

getters也是 配置属性中的另一个属性，getters 属性值是一个对象，有点类型于 Vue 的计算属性（computed），也是有缓存的

3.1【getters属性__定义getters】

定义的 getters方法默认会带有一个参数 state , 也就是 store 中的 state 对象，经过处理后，返回新的数据

// 路径：srec / store / userStore.ts
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state:() => {
    return {
      name: '一位路过的假面骑士',
      sex: '男',
      age: 20
    }
  },
  getters: {
    // state 参数就是 上面 state 对象
    userAgeAdd：(state) => {
      return state.age + 100
    }
  }
})
// 使用  
// 路径: src / App.vue
<script setup lang="ts">
  // 引入 store
    import { useUserStore } from "../src/store/user";
    import { storeToRefs } from 'pinia';
    const userStore = useUsersStore();
    const { name, age, sex } = storeToRefs(userStore);
</script>
<template>
  <h1>{{ name }}</h1>
  <h2>{{ age }}</h2>
  <h3>{{ age }}</h3>
  <h3>{{ userStore.userAgeAdd }}</h3>    
</template>

3.2【getters属性__在getters中使用另一个getter】

在另一个getters中调用另一个 getters可以使用到 this，此时的 this指向的便是 store实例

// 路径：srec / store / userStore.ts
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state:() => {
    return {
      name: '一位路过的假面骑士',
      sex: '男',
      age: 20
    }
  },
  getters: {
    // state 参数就是 上面 state 对象
    userAgeAdd：(state) => {
      return state.age + 100
    },
    userUpdataAge(){
      // 这里调用了其他 getters 属性
      return this.age + this.userAgeAdd
    }
  }
})

3.2【getters属性__给getters传参】

运用闭包的概念，返回一个新的函数，将 status 传入，便可以支持 getters传参

// 路径：srec / store / userStore.ts
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state:() => {
    return {
      name: '一位路过的假面骑士',
      sex: '男',
      age: 20
    }
  },
  getters: {
    setUserAge:(state) =>{
      return (newAge) => state.age + newAge;
    }
  }
})
// 在组件中使用
// 路径: src / App.vue
<script setup lang="ts">
  // 引入 store
    import { useUserStore } from "../src/store/user";
    import { storeToRefs } from 'pinia';
    const userStore = useUsersStore();
    const { name, age, sex } = storeToRefs(userStore);
</script>
<template>
  <h1>{{ name }}</h1>
  <h2>{{ age }}</h2>
  <h3>{{ age }}</h3>
  <h3>更新后age：{{ userStore.setUserAge(5) }}</h3>    // 25
</template>