Vue3:状态管理-Store(Vuex,Pinia)

Posted 梦雨生生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue3:状态管理-Store(Vuex,Pinia)相关的知识,希望对你有一定的参考价值。

什么是状态管理

        理论上来说,每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了

        它是一个独立的单元,由以下几个部分组成

  • 状态:驱动整个应用的数据源;
  • 视图:对状态的一种声明式映射;
  • 交互:状态根据用户在视图中的输入而作出相应变更的可能方式。

Vuex和Pinia的区别

    Vuex:

          1.由state,getters,mutations,actions,modules组成

           2.通过mutations修改state

       优点:

                支持调试功能,如时间旅行和编辑

                适用于大型、高复杂度的Vue.js项目

  ​​​​​​       缺点:

                 服务器端呈现的,则会将您的应用程序暴露给安全漏洞

                getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。

    Pinia:   

                1.由state,getters,actions组成

                2.通过getters,actions修改state,也可以通过$patch

        优点:

                完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易

                极其轻巧(体积约 1KB)

                store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或 MapAction 辅助函数,这在 Vuex 中很常见

                支持多个Store

                支持 Vue devtools、SSR 和 webpack 代码拆分

        缺点:

                不支持时间旅行和编辑等调试功能

Vuex状态管理

        对于已经有过Vue2项目经验的来说,可能Vuex更加熟悉。

        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

        安装:

        npm install vuex@next --save

        开始:

主页面:

<template>

  <div class="home">

    <div>Store:count</div>

    <ChildViewVue></ChildViewVue>

  </div>

</template>

<script lang="ts" setup>

import reactive, ref, computed from 'vue';

import ChildViewVue from './ChildView.vue';

import useStore from 'vuex';

const store = useStore();

console.log('const store = useStore();', store.state.count)

const count = computed(() => store.state.count)

</script>

子页面:

<template>

  <div class="ChildView">

    <button @click="clickChange">修改store</button>

  </div>

</template>

<script lang="ts" name="ChildView" setup>

import ref, watch from 'vue'

import useStore from 'vuex';

const store = useStore();

const clickChange = () =>

  let random = Math.floor(Math.random() * 10 + 1)

  store.commit('CHANGE_COUNT',random)

</script>

store:

import createStore from 'vuex';

export default createStore(

  state:

    count: 0

  ,

  getters: ,

  mutations:

    CHANGE_COUNT(state: count: any , data: any)

      state.count = data;

   

  ,

  actions: ,

  modules:

);

Pinia状态管理

     Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。如果您熟悉 Composition API,您可能会认为您已经可以使用简单的export const state = reactive(). 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,则会将您的应用程序暴露给安全漏洞。

  • 更强的团队协作约定
  • 与 Vue DevTools 集成,包括时间轴、组件内部审查和时间旅行调试
  • 模块热更新 (HMR)
  • 服务端渲染支持
npm install pinia

主页面:

<template>

  <div class="home">

    <div>pinia:count</div>

    <ChildViewVue></ChildViewVue>

  </div>

</template>

<script lang="ts" setup>

import reactive, ref, computed from 'vue';

import ChildViewVue from './ChildView.vue';

import changeNum from "@/store";

import storeToRefs from 'pinia'

const store = changeNum()

const count = storeToRefs(store)

</script>

子页面

<template>

  <div class="ChildView">

    <button @click="clickChange">修改store</button>

  </div>

</template>

<script lang="ts" name="ChildView" setup>

import ref, watch from 'vue'

import changeNum from "@/store";

const store = changeNum()

const clickChange = () =>

  let random = Math.floor(Math.random() * 10 + 1)

  store.CHANGE_COUNT(random)

</script>

store

import defineStore from 'pinia';

export const changeNum = defineStore('main',

  state: () => ( count: 0 ),

  getters: ,

  actions:

    CHANGE_COUNT(data: any)

      this.count = data;

   

 

);

main.ts

import createApp from 'vue'

import App from './App.vue'

import router from './router'

import createPinia from 'pinia'

createApp(App).use(createPinia()).use(router).mount('#app')

总结

        根据Vue官方回答:

        现有用户可能对 Vuex 更熟悉,它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好,因此 Vuex 现在处于维护模式。它仍然可以工作,但不再接受新的功能。对于新的应用,建议使用 Pinia

        事实上,Pinia 最初正是为了探索 Vuex 的下一个版本而开发的,因此整合了核心团队关于 Vuex 5 的许多想法。最终,我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容,因此决定将其作为新的官方推荐。

相比于 Vuex,Pinia 提供了更简洁直接的 API,并提供了组合式风格的 API,最重要的是,在使用 TypeScript 时它提供了更完善的类型推导

        总得来说,Vuex目前是能够满足我们日常项目需求,等Vuex下一个版本,可能就要使用Pinia了。

        

                

VUEX(状态管理)

1.导入vuex包

import vuex from ‘vuex’

2.注册vuex到vue中

vue.use(vuex)

3.new vuex.store() 得到一个数据存储对象

var store = new vuex.store()

4.将new出来的store对象挂载到vue上

一,state 存放一些公共的数据

1 state: { 
2 
3 ?    count: 0
4 
5 ?    }  

两种方式访问state中的数据

1. this.$store.state.属性名

2.  从vuex中导入 mapState 函数    将全局数据映射为当前组件的计算属性

1   import { mapState } from vuex
5 ?    computed: {
7 ?        ...mapState ([count])
9 ?    }

拿到了state中的数据,不能直接修改(操作)数据,要通过触发mutation里的方法

一,mutation用来改变state里数据的唯一属性

1. 触发mutation里的方法

技术图片

 

 技术图片

 

 2. 触发mutation里的方法

技术图片

 

 

技术图片

 

 三,action用于异步处理任务

技术图片

 

 技术图片

 

 四,getter(相当于计算属性,方法里直接用return),访问两种方式

技术图片

 

 技术图片

 

 技术图片

 

以上是关于Vue3:状态管理-Store(Vuex,Pinia)的主要内容,如果未能解决你的问题,请参考以下文章

一小时学会使用pinia

一小时学会使用pinia

vue3不要再使用vuex

Vue3.0中如何快速上手Vuex状态管理

Vuex状态管理工具

vue.js的状态管理vuex中store的使用