Vue3基础(25)___初尝pinia，相比于vuex轻量、好用

六卿

已于 2022-11-16 14:30:22 修改

阅读量631

点赞数 4

分类专栏： # vue 文章标签： javascript vue.js 前端 pinia vuex

于 2022-11-08 14:13:36 首次发布

本文链接：https://blog.csdn.net/qq_43291759/article/details/127749212

版权

vue 专栏收录该内容

75 篇文章 17 订阅

订阅专栏

初尝pinia，相比于vuex轻量、好用

pinia官网入口：pinia官网

Pinia 最初是在 2019 年 11 月左右重新设计使用 Composition API 。从那时起，最初的原则仍然相同，但 Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。除了安装和 SSR 之外，两者的 API 都是相同的，并且这些文档针对 Vue 3，并在必要时提供有关 Vue 2 的注释，以便 Vue 2 和 Vue 3 用户可以阅读

为什么要使用 Pinia？
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}).
这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。但即使在小型单页应用程序中，您也可以从使用
Pinia 中获得很多好处：

dev-tools 支持跟踪动作、突变的时间线 Store 出现在使用它们的组件中 time travel 和更容易的调试热模块更换
在不重新加载页面的情况下修改您的 Store 在开发时保持任何现有状态插件：使用插件扩展 Pinia 功能为 JS 用户提供适当的
TypeScript 支持或 autocompletion 服务器端渲染支持
与 Vuex 3.x/4.x 的比较
Vuex 3.x 是 Vuex 的 Vue 2 而 Vuex 4.x 是 Vue 3
Pinia API 与 Vuex ≤4 有很大不同，即：
mutations 不再存在。他们经常被认为是非常冗长。他们最初带来了 devtools 集成，但这不再是问题。
无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
不再需要注入、导入函数、调用函数、享受自动完成功能！
无需动态添加 Store，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用 Store 进行注册，但因为它是自动的，您无需担心。
不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和使用来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。您甚至可以拥有 Store 的循环依赖关系。
没有命名空间模块。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的。

使用：
1.安装 pinia

npm i pinia

2.在main.js中引入根pinia

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')

3.创建单独文件夹存储所有需要的store对象，js、ts文件
在这里插入图片描述

import { defineStore } from 'pinia'

export const useHomeStore = defineStore('useHomeStore', {
  state() {
    return {
      name: "六卿",
      age: "18",
      habby: [{ key: "1", value: "跳舞" }]
    }
  },
  getters: {
    getAge(state) {
      return Number(state.age) + 10
    }
  },
  actions: {
    // 第一个参数就是 调用的时候传入的参数
    changeNewAge(age) {
      console.log(this, 'this')
      console.log(age, 'ageageageage')
      this.age = age
    }
  },
})

这样我们就已经创建了一个简单的piniaStore对象，
4.使用：
在这里插入图片描述

<template>
  <div>
    <p style="color: red">Children showTime</p>
    <div class="hello">currentName: {{ name }}</div>
    <div class="hello">currentAge: {{ age }}</div>
    <div class="hello">currentHabby: {{ habby }}</div>
    <button @click="changeNameFun">changeNameFun</button>
  </div>
</template>

<script>
// 需要使用 storeToRefs 将store转化为ref响应式对象
import { storeToRefs } from 'pinia';
import { useHomeStore } from '../store/home.ts'
export default {
  name: 'Children-my',
  setup() {
    // 函数 需要调用
    console.log(useHomeStore, 'useHomeStore')
    const storeHome = useHomeStore()
    const { name, age, habby } = storeToRefs(storeHome)
    const changeNameFun = () => {
      storeHome.name = 'name --- > children ooooo'
    }
    return { name, age, habby, changeNameFun }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 500px;
  text-align: left;
}
</style>

上面我们用到了一个新的API_____storeToRefs :可以看看官网如何解释
在这里插入图片描述

在这里插入图片描述
解构之后不再具有响应式，需要使用storeToRefs：
为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()。它将为任何响应式属性创建 refs。当您仅使用 store 中的状态但不调用任何操作时，这很有用
5.改变store的值
点击 changeNameFun 按钮的时候，执行

    const changeNameFun = () => {
      storeHome.name = 'name --- > children ooooo'
    }

会发现页面直接进行了改变，达到了效果，但是想要批量进行改变的时候，可能有些麻烦，我们可以使用$patch进行批量更改：

    const changeAllFun = () => {
      // 批量修改数据1
       storeHome.$patch({
         name: "batchName",
         age: "222"
       });
       // 批量修改数据2
       storeHome.$patch((state) => {
         state.age = 888
         // state.habby.push({ value: 'shoes', key: '3' })
       })
    }

6.使用getter
home.ts

  getters: {
    getAge(state) {
      return Number(state.age) + 10
    }
  },

页面：

  setup() {
    // 函数 需要调用
    console.log(useHomeStore, 'useHomeStore')
    const storeHome = useHomeStore()
    const { name, age, habby, getAge } = storeToRefs(storeHome)
    return { name, age, habby, getAge}
  },

7.使用actions
home.ts

  actions: {
    // 第一个参数就是 调用的时候传入的参数
    changeNewAge(age) {
      console.log(this, 'this')
      console.log(age, 'ageageageage')
      this.age = age
    }
  },

页面使用：

  setup() {
    // 函数 需要调用
    console.log(useHomeStore, 'useHomeStore')
    const storeHome = useHomeStore()
    const { name, age, habby, getAge } = storeToRefs(storeHome)
    const changeAllFun = () => {
      storeHome.changeNewAge('9999')
    }
    return { name, age, habby, getAge,  changeAllFun }
  },

改变store数据有三种方法
1.store.name
2.store.$patch
3.store.actionsFun
store也有重置方法

store.$reset()

这是知乎的以为大佬的文章，写的着实很详细啊：一文搞懂pinia状态管理（保姆级教程）

全部代码：
页面：
在这里插入图片描述

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')

app.vue

<template>
  <Bottom />
</template>

<script>
import Bottom from './components/Bottom.vue'

export default {
  name: 'App',
  components: {
    Bottom,
  }
}
</script>

home.ts

import { defineStore } from 'pinia'

export const useHomeStore = defineStore('useHomeStore', {
  state() {
    return {
      name: "六卿",
      age: "18",
      sex:"男",
      habby: [{ key: "1", value: "跳舞" }]
    }
  },
  getters: {
    getAge(state) {
      return Number(state.age) + 10
    }
  },
  actions: {
    // 第一个参数就是 调用的时候传入的参数
    changeNewAge(age) {
      console.log(this, 'this')
      console.log(age, 'ageageageage')
      this.age = age
    }
  },
})

bottom.vue:

<template>
  <div>
    <p style="color: red">Children1 showTime</p>
    <div class="hello">currentName: {{ name }}</div>
    <div class="hello">currentAge: {{ age }}</div>
    <div class="hello">currentSex: {{ sex }}</div>
    <div class="hello">currentHabby: {{ habby }}</div>
    <div class="hello">getAge: {{ getAge }}</div>
    <button @click="changeNameFun">改名称</button>
    <button @click="changeAllFun">changeAllFun</button>
    <button @click="changeResetFun">重置</button>
  </div>
</template>

<script>
// 需要使用 storeToRefs 将store转化为ref响应式对象
import { storeToRefs } from 'pinia';
import { useHomeStore } from '../store/home.ts'
// import { onMounted, ref, watch } from 'vue'
export default {
  name: 'Children1-my',
  setup() {
    // 函数 需要调用
    console.log(useHomeStore, 'useHomeStore')
    const storeHome = useHomeStore()
    const { name, age, sex, habby, getAge } = storeToRefs(storeHome)
    const changeNameFun = () => {
      storeHome.name = 'name --- > children111 ooooo'
    }
    const changeResetFun = () => {
      // 将数据重置到最初状态
      storeHome.$reset();
    }
    const changeAllFun = () => {
      // sex 被包装成 ref  需要.value支持
      storeHome.sex = sex.value === '男' ? '女' : '男'
      // 批量修改数据
      storeHome.$patch({
        habby: "hahahahha"
      });
      // storeHome.$patch((state) => {
      //   state.age = 888
      //   // state.habby.push({ value: 'shoes', key: '3' })
      // })
      // 直接替换整个state
      storeHome.$state = {
        name: "1233333"
      }
      storeHome.changeNewAge('9999')
    }
    return { name, age, sex, habby, getAge, changeNameFun, changeResetFun, changeAllFun }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 500px;
  text-align: left;
}
</style>