什么是状态管理

理论上来说，每一个 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')