VueX 简介

Vue官方：状态管理工具

状态管理是什么

需要在多个组件中共享的状态、且是响应式的、一个变，全都改变。

例如一些全局要用的的状态信息：用户登录状态、用户名称、地理位置信息、购物车中商品、等等

这时候我们就需要这么一个工具来进行全局的状态管理，Vuex就是这样的一个工具。

单页面的状态管理

View–>Actions—>State

视图层(view)触发操作(action)更改状态(state)响应回视图层(view)

多页状态管理

vuex store对象属性介绍

vue3 中的 setup 在 beforecreate 和 created 前执行，此时 vue对象还未被创建，没有了之前的this，所以此处我们需要用到另一种方法来获取到 store 对象。

import { useStore } from 'vuex' // 引入useStore 方法
const store = useStore()  // 该方法用于返回store 实例
console.log(store)  // store 实例对象

1. state

存放数据的地方

state: {
  count: 100,
  num: 10
},

可以在 state 中直接进行数据变化的操作，但Vue不建议这么做。因为对于vue开发工具 devtools 来说，直接在state中进行数据改变，devtools是跟踪不到的。vuex中希望通过 action（进行异步操作）或是 mutations（同步操作）来进行数据改变的操作，这样在 devtools 中才能直接观察出数据的变化以及记录，方便开发者调试。

另外，在vue3 中对state 中对象新增属性或删除时，不再需要通过 vue.set() , 或是 vue.delete() 来进行对象的响应式处理了，直接新增的对象属性已经具有响应式

2. mutations

vuex的store状态更新的唯一方式：提交 mutation

同步操作可以直接在mutatuions中直接进行

mutions 主要包含2部分:

1. 字符串的事件类型 (type)

2. 一个**回调函数（handler）**该回调函数的第一个参数是 state

   mutations: {
   // 传入 state
   increment (state) {
   state.count++
   }
   }

template 中通过 $store.commit('方法名') 触发

// 导入 useStore 函数
import { useStore } from 'vuex'
const store = useStore()
store.commit('increment')

mution 的参数与传参方法

mution 接收参数直接写在定义的方法里边即可接受传递的参数

// ...state定义count
mutations: {sum (state, num) {state.count += num}
}

通过 commit 的payload 进行参数传递

使用 store.commit('mution中函数名', '需要传递的参数' ) 在commit里添加参数的方式进行传递

<h2>{{this.$store.state.count}}</h2>
<button @click="add(10)">++</button>
...
<script setup>
// 获取store实例，获取方式看上边获取store实例方法
const add = (num) => {store.commit('sum', num)
}
</script>

mution 的提交风格

前面提到了 mution 主要包含 type 和 回调函数 两部分, 和通过commit payload的方式进行参数传递（提交）,下面我们可以

用这种方式进行 mution 的提交

const add = (num) => {store.commit({type: 'sum',  // 类型就是mution中定义的方法名称num})
}...
mutations: {sum (state, payload) {state.count += payload.num}
}

 3. actions

异步操作在action中进行，再传递到mutation

action基本使用如下：

action 中定义的方法默认参数为** context 上下文**， 可以理解为 store 对象

通过 context 上下文对象，拿到store，通过 commit 触发 mution 中的方法，以此来完成异步操作

...
mutations: {sum (state, num) {state.count += num}
},
actions: {// context 上下文对象，可以理解为storesum_actions (context, num) {setTimeout(() => {context.commit('sum', num)  // 通过context去触发mutions中的sum}, 1000)}
},

在template 中通过dispatch 调用action 中定义的sum_action 方法

// ...template
store.dispatch('sum_actions', num)

通过 promise 实现异步操作完成，通知组件异步执行成功或是失败。

// ...
const addAction = (num) => {store.dispatch('sum_actions', {num}).then((res) => {console.log(res)}).catch((err) => {console.log(err)})
}

sun_action方法返回一个promise，当累加的值大于30时不再累加，抛出错误。

 actions: {sum_actions (context, payload) {return new Promise((resolve, reject) => {setTimeout(() => {// 通过 context 上下文对象拿到 countif (context.state.count < 30) {context.commit('sum', payload.num)resolve('异步操作执行成功')} else {reject(new Error('异步操作执行错误'))}}, 1000)})}},

4. getters

类似于组件的计算属性

import { createStore } from 'vuex'export default createStore({state: {students: [{ name: 'mjy', age: '18'}, { name: 'cjy', age: '22'}, { name: 'ajy', age: '21'}]},getters: {more20stu (state) { return state.students.filter(item => item.age >= 20)}}
})

使用 通过$store.getters.方法名 进行调用

//...template
<h2>{{$store.getters.more20stu}}</h2> // 展示出小于20岁的学生

getters 的入参, getters 可以接收两个参数，一个是 state, 一个是自身的 getters ，并对自身存在的方法进行调用。

getters: {more20stu (state, getters) { return getters.more20stu.length}
}

getters 的参数与传参方法

上面是getters固定的两个参数，如果你想给getters传递参数，让其筛选大于 age 的人，可以这么做

返回一个 function 该 function 接受 Age，并处理

getters: {more20stu (state, getters) { return getters.more20stu.length},moreAgestu (state) {return function (Age) {return state.students.filter(item =>item.age >= Age)}}// 该写法与上边写法相同但更简洁，用到了ES6中的箭头函数，如想了解es6箭头函数的写法// 可以看这篇文章 https://blog.csdn.net/qq_45934504/article/details/123405813?spm=1001.2014.3001.5501moreAgestu_Es6: state => {return Age => {return state.students.filter(item => item.age >= Age)}}
}

使用

//...template
<h2>{{$store.getters.more20stu}}</h2> // 展示出小于20岁的学生
<h2>{{$store.getters.moreAgestu(18)}}</h2> // 通过参数传递, 展示出年龄小于18的学生

5. modules

当应用变得复杂时，state中管理的变量变多，store对象就有可能变得相当臃肿。

为了解决这个问题，vuex允许我们将store分割成模块化（modules），而每个模块拥有着自己的state、mutation、action、getters等

在store文件中新建modules文件夹

在modules中可以创建单一的模块，一个模块处理一个模块的功能

store/modules/user.js 处理用户相关功能

store/modules/pay.js 处理支付相关功能

store/modules/cat.js 处理购物车相关功能

// user.js模块
// 导出
export default {namespaced: true, // 为每个模块添加一个前缀名，保证模块命明不冲突 state: () => {},mutations: {},actions: {}
}

最终通过 store/index.js 中进行引入

// store/index.js
import { createStore } from 'vuex'
import user from './modules/user.js'
import user from './modules/pay.js'
import user from './modules/cat.js'
export default createStore({modules: {user,pay,cat}
})

在template中模块中的写法和无模块的写法大同小异，带上模块的名称即可

<h2>{{$store.state.user.count}}</h2>store.commit('user/sum', num) // 参数带上模块名称
store.dispatch('user/sum_actions', sum)

一、使用vuex

vuex的安装：

npm i vuex

vuex的配置，@/store/index.js：

import {createStore} from 'vuex'//导入createStore构造函数
export default createStore({ state:{ //Vuex的状态，实际上就是存数据的地方person:{name:'jack',age:200}},getters:{ //提供获取Vux状态的方式, 注意在组件中调用时getPerson是以属性的方式被访问getPerson(state){return state.person}},mutations:{ //提供直接操作Vuex的方法，注意mutations里的方法中不能有任何异步操做ageGrow(state, value){//第一个参数state为Vuex状态；第二个参数为commit函数传来的值state.person.age += value}},actions:{ //提供通过mutations方法来简介操作Vuex的方法ageGrow(context, value){ //第一个参数context为上下文，提供一些方法；第二个参数为dispatch函数传来的值context.commit('ageGrow', value)}}, 
})

在@/main.js中引入：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')

在组件中使用Vuex:

<template><h1>名字：{{person.name}}--年龄：{{person.age}}</h1><input type="text" v-model="value"><button @click="ageGrow(value)">增加年龄</button><!-- 在input框输入一个数字，点击按钮，可以看到年龄发生变化，说明Vuex正常工作 -->
</template><script>import {useStore} from 'vuex' import {ref} from 'vue'export default {setup(){const store = useStore()    //获取store对象let person = store.getters.getPerson    //从组件中获取状态(数据)person 方式一// let person = store.state.person      //从组件中获取状态(数据)person 方式二let value = ref('输入年龄的增量')function ageGrow(ageGrowth){ageGrowth = parseInt(ageGrowth)if(isNaN(ageGrowth)){ageGrowth = 0}store.dispatch('ageGrow', ageGrowth)//通过dispatch来调用actions里的'ageGrow'方法，参数为ageGrowth//actions的方法又会通过commit来调用mutations里的方法，从而引起状态(数据)的变化//也可以在组件里跳过dispatch actions，直接store.commit}return {person, value,ageGrow}}}
</script>
<style></style>

小结：安装完vuex之后，首先要用creatRouter构造函数创建一个router对象，并在main.js中引入这个对象。然后在组件中，通过userStore方法来获取这个router对象，进一步通过getter或者state可以得到Vuex状态(数据)，通过dispatch->actions->mutations->state的数据传送方式可以操作和改变Vuex的状态(数据)

2. Module

Vuex官方原话：“由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。”

什么叫单一状态树呢，其实就是上文中的state对象。在Vuex的基本使用中，我们使用state对象来存储Vuex的状态，state对象里面可以嵌套其他的对象，它是一个树形的结构，而且这个state对象是唯一的，所有的状态都要存储在这一个对象里。因此，我们称之为单一状态树。
这种单一状态树的弊端是显而易见的，对于中大型项目来说，要托管给Vuex的状态有很多，把这些海量的数据如果都塞到一个文件里面的一个对象里面，未免显得过于臃肿，不管是开发起来还是维护起来都会有很多不变。
对此，官方给出了解决方案：
 

“为了解决以上问题，Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割”

2.1 vuex中模块化的基本使用

vuex的模块化没什么难理解的，就是把store给拆开，一个对象拆成多个对象，一个文件拆成多个文件，并且彼此可以拥有独立的命名空间。
道理很简单，所以直接看样例：

文件结构

├──src├── components│   └── Test.vue└── store├── index.js└── modules├── male.js└── female.js

index.js

import {createStore} from 'vuex'
import female from './modules/female'   //导入模块
import male from './modules/male'       //导入模块
export default createStore({ modules:{   //使用模块female,male}
})

male.js

export default {namespaced:true,    //namespaced:true代表该模块带有独立命名空间state:{             //否则，默认是处于全局命名空间，就和非模块化一样personList:[{name:'张飞', id:'004'},{name:'武则天', id:'005'},{name:'秀吉', id:'006'},]},mutations:{addMutation(state, value){      //往personList中添加一个人state.personList.push(value)},removeMutaion(state, value){    //往personList中删除一个人state.personList = state.personList.filter((el) => el.id != value.id)}},actions:{addAction(context, value){setTimeout(() => {context.commit('addMutation', value) // ->'male/addMutation'}, 1000);},removeAction(context, value){context.commit('removeMutaion', value)}},getters:{personList(state){return state.personList}}
}

female.js

export default {namespaced:true,    //namespaced:true代表该模块带有独立命名空间state:{             //否则，默认是处于全局命名空间，就和非模块化一样personList:[{name:'李白', id:'001'},{name:'孙尚香', id:'002'},{name:'大乔', id:'003'},]},mutations:{addMutation(state, value){      //往personList中添加一个人state.personList.push(value)},removeMutaion(state, value){    //往personList中删除一个人state.personList = state.personList.filter((el) => el.id != value.id)}},actions:{addAction(context, value){setTimeout(() => {context.commit('addMutation', value) // ->'female/addMutation'}, 1000);},removeAction(context, value){context.commit('removeMutaion', value)}},getters:{personList(state){return state.personList}}
}

Test.vue

<template><h1>女人：</h1><li v-for="femalePerson in femalePersons" :key="femalePerson.id">{{femalePerson.name}}<button @click="addToMale(femalePerson)">添加到男人</button></li><h1>男人：</h1><li v-for="malePerson in malePersons" :key="malePerson.id">{{malePerson.name}}<button @click="addToFemale(malePerson)">添加到女人</button></li><!-- 有两个列表，分布是男人和女人，通过点击按钮可以把列表中的某些项添加到另一个列表中 --><!-- 建议粘贴复制并运行代码，这样更直观 -->
</template><script>import { computed } from '@vue/runtime-core';import {useStore} from 'vuex'export default {setup(){let store = useStore()let malePersons = computed(() => store.getters['male/personList']) //通过getter获取statelet femalePersons = computed(() => store.state.female.personList)   //直接获取statefunction addToMale(person){store.dispatch('male/addAction', person)store.dispatch('female/removeAction', person)//如果模块中namespaced === true，那么要在方法名前面添加模块的逻辑路径//index.js里使用的模块为路径的起点。//比如index里面有一个moduleA，moduleA有一个子模块moduleB，module有一个action是actionx//那么调用方式为 store.dispatch('moduleA/moduleB/actionx', value)}function addToFemale(person){store.dispatch('female/addAction', person)store.dispatch('male/removeAction', person)}return {malePersons,femalePersons,addToMale,addToFemale}}}
</script>
<style></style>

2.2 在命名空间中访问全局内容

什么是全局内容？不在同一个模块中的内容就是全局内容。
比如，对于上文中的female模块来说，male模块中的getters state action mutations就是全局内容，接下来将会讲解如何在一个模块中访问到全局内容。
为了便于理解，我创造了一个新的样例：

├──src├── components│   └── Test.vue└── store├── index.js└── modules├── moduleA.js└── moduleB.js

index是所有的模块的根，moduleA和moduleB是两个子模块，接下来要做的事情就是在index.js、moduleA.js、moduleB.js中写一些getters state action mutations，最终达成的效果是在index中访问moduleA的内容，在moduleA中访问moduleB的内容，在moduleB中访问index的内容。
Test.vue:

<template><li> {{rootModule.name}}---{{rootModule.num}} <button @click="rootClick">rootAction---A++</button> </li><li> {{moduleA.name}}---{{moduleA.num}} <button @click="aClick">moduleAction---B++</button> </li><li> {{moduleB.name}}---{{moduleB.num}} <button @click="bClick">moduleAction---root++</button> </li><!-- 点击root，moduleA数字加一；点击moduleA，moduleB数字加一；点击moduleB，root数字加一 --><button @click="store.dispatch('globalAction')">触发全局action</button>
</template><script>import {useStore} from 'vuex'export default {setup(){let store = useStore()console.log(store.getters);let rootModule = store.getters['moduleB/rootStateThroughModuleB'].info //通过moduleB的getters获得root的状态let moduleA = store.getters['moduleAStateThroughRoot'].info            //通过root的getters获得moduleA的状态let moduleB = store.getters['moduleA/moduleBStateThroughModuleA'].info //通过moduleA的getters获得moduleB的状态// let moduleB = store.state.moduleB.info// let moduleA = store.state.moduleA.info// let rootModule = store.state.infofunction rootClick(){store.dispatch('addAction', 1)}    //调用root中的action，改变的是moduleA的状态function aClick(){store.dispatch('moduleA/addAction', 1)}//调用moduleA中的action，改变的是moduleB的状态function bClick(){store.dispatch('moduleB/addAction', 1)}//调用moduleB中的action，改变的是root的状态return {rootModule,moduleA,moduleB,rootClick,aClick,bClick,store}}}
</script>
<style></style>

3. vuex的typescript用法

vuex的typescript用法其实就是把state加上ts里的类型限制

3.1 不使用模块化

store文件

// store.ts
import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'// 为 store state 声明类型
export interface State {count: number
}// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol()export const store = createStore<State>({state: {count: 0}
})

在main.ts里引入

// main.ts
import { createApp } from 'vue'
import { store, key } from './store'const app = createApp({ ... })// 传入 injection key
app.use(store, key)app.mount('#app')

在组件中使用useStore()获取store，将上述 injection key 传入 useStore 方法可以获取类型化的 store。

// vue 组件
import { useStore } from 'vuex'
import { key } from './store'export default {setup () {const store = useStore(key)store.state.count // 类型为 number}
}

在每个组件中都导入key有些重复且麻烦，我们可以将useStore()封装成myUseStore()

// 在store.ts增加下面几行
import { useStore } from 'vuex'
export function myUseStore () {return useStore(key)
}

3.2 使用模块化

store/index.ts

import { createStore, Store  } from 'vuex'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'
import { InjectionKey } from 'vue'//模块A state的类型
interface moduleAState {name:string,age:number
}//模块B state的类型
interface moduleBState {id:string,adult:boolean
}//vuex state类型
interface State{moduleA:moduleAState,moduleB:moduleBState 
}//如果使用模块化的话，在createStore参数里面就不要写state了，否则会报错
export const key: InjectionKey<Store<State>> = Symbol()
export const store =  createStore<State>({// state:{}, //不可以加这一行，否则报错modules: {moduleA,moduleB}
})

在组件中访问：

// vue 组件
import { useStore } from 'vuex'
import { key } from './store'export default {setup () {const store = useStore(key)store.state.moduleA// 类型为 moduleAStatestore.state.moduleB// 类型为 moduleBState}
}

Pinia 简介 

Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库。在Vue3成为正式版以后，尤雨溪强势推荐的项目就是Pinia。
那先来看看Pinia比Vuex好的地方，也就是Pinia的五大优势。

可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。
抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。
不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。如果你对Vuex很熟悉的化，一定知道Vuex对TS的语法支持不是完整的（经常被吐槽）。
代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割，pinia也同样继承了这个优点。

安装和配置Pinia

安装和配置Pinia非常简单，像其他Vue插件一样，Pinia需要通过yarn或npm进行安装并且与Vue应用程序进行绑定，可以使用以下命令进行安装：

yarn add pinia
# 或者使用 npm
npm install pinia
 

在安装完Pinia包之后，需要在main.ts文件中导入createPinia函数并将Pinia插件与Vue应用程序绑定，如下所示：

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

使用 createPinia() 函数创建并初始化Pinia插件实例，将其与Vue应用程序绑定使用app.use(pinia)。至此，我们就可以使用Pinia来管理Vue应用程序的状态了。

Pinia的核心

Store

import { defineStore } from 'pinia'// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，
同时以 `use` 开头且以 `Store` 结尾。
(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {// 其他配置...
})

import { defineStore } from 'pinia'const useStore = defineStore('storeId', {// 为了完整类型推理，推荐使用箭头函数state: () => {return {// 所有这些属性都将自动推断出它们的类型count: 0,name: 'Eduardo',isAdmin: true,items: [],hasChanged: true,}},
})

export const useStore = defineStore('main', {state: () => ({count: 0,}),getters: {doubleCount: (state) => state.count * 2,},
})

import { defineStore } from 'pinia'export const myStore = defineStore('myStore',{ state: () => ({message: 'Hello',}),actions: {async fetchMessage() {const response = await fetch('http://127.0.0.1:5173/message')const data = await response.json()this.message = data.message},},
})

import { useStore } from 'pinia'export default {setup() {const store = useStore('myStore')function handleClick() {store.fetchMessage()}return {handleClick,}},
}

创建Pinia

import { defineStore } from 'pinia'

 const useMovieListStore = defineStore('movie',{ state: () => ({isShow: true,movies: [],}),getters: {getIsShow() {return this.isShow},getMovies() {return this.movies},},actions: {setIsShow(value) {this.isShow = value},async fetchMovies() {const response = await fetch('https://api.movies.com/movies')const data = await response.json()this.movies = data},},
})
export default useMovieListStore 

import { useStore } from 'pinia'

const store = useStore('movie')

return {isShow: store.getIsShow(),
}

<template><nav><ul><li v-show="isShow">{{ $route.name }} </li><li><router-link to="/">Home</router-link></li><li><router-link to="/movies">Movies</router-link></li></ul></nav>
</template><script>
import { defineComponent } from 'vue'
import { useStore } from 'pinia'export default defineComponent({name: 'Menu',setup() {const store = useStore('movie')return {isShow: store.getIsShow(),}},
})
</script>

export const useCounterStore = defineStore('counter', () => {const count = ref(0)function increment() {count.value++}return { count, increment }
})

pinia在API里的使用

 1.$reset ：重置到初始值

这个 $reset 可以将 state 的数据初始到初始值，比如我们有一个数据，点击按钮改变了，然后我们可以通过这个 API ，将数据恢复到初始状态值。

  2.$subscribe：监听 state 数据变化

$subscribe 使用来监听的，监听 state 数据的变化，只要 state 里面的数据发生了变化，就会自动走这个函数。

   3.$onAction：一调用 actions 就触发

这个看名字就很好理解了吧，就是 action 一调用就会被触发。

它里面只有一个参数 args。写一下关键代码吧。

Pinia 与 VueX的区别与优缺点：

pinia和vuex的区别
（1）pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据
 （2）pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点

 （3）pinia语法上比vuex更容易理解和使用，灵活。
 （4）pinia没有modules配置，没一个独立的仓库都是definStore生成出来的

 （5）pinia state是一个对象返回一个对象和组件的data是一样的语法
 

Vuex 和 Pinia 的优缺点
Pinia的优点

完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
极其轻巧(体积约 1KB)
store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
支持多个Store
支持 Vue devtools、SSR 和 webpack 代码拆分
Pinia的缺点

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

Vuex的优点

• 支持调试功能，如时间旅行和编辑
• 适用于大型、高复杂度的Vue.js项目

Vuex的缺点

• 从 Vue 3 开始，getter 的结果不会像计算属性那样缓存
• Vuex 4有一些与类型安全相关的问题

何时使用Pinia，何时使用Vuex

个人感觉：，由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。
将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。
 

Vue3使用Vuex_vue3 vuex官网_BigJF的博客-CSDN博客

Vue3中Vuex的使用_vue3中使用vuex_普通网友的博客-CSDN博客

Vue3之Vuex_vue3的vuex_开longlong了吗？的博客-CSDN博客

Vue3中使用Pinia详解_九仞山的博客-CSDN博客

pinia和vuex的区别 Vuex 和 Pinia 的优缺点 何时使用Pinia，何时使用Vuex_pinia和vuex区别_more名奇妙的博客-CSDN博客