Vuex定义

以下是Vue官网对于Vuex的定义：

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

从官方定义上看： Vuex提供了一个全部组件的状态（包含了数据和数据操作规则）的保存容器，由此组件的的状态的改变从组件抽离出来，保存到一个容器里面，由此极大提高代码复用能力和组件间通信能力。

Vuex架构

State

state是整个的核心，保存了全部组件的组件的数据及其规则的容器。

Vue Component

指的我们使用的vue的组件，数据通过render函数渲染展示到Vue components上。

Actions

这里提供了组件与数据交互的方法，我们通过dispatch，调用vuex的里面的数据和方法，并把业务提交到Mutations里面。

Mutations

通过此方法可以实现对Vuex的状态完成最终的修改
在这里插入图片描述

调用流程

1.调用组件，将请求转发给Actions
2.由Actions具体解析请求（考虑与后端交互）
3.将请求提交到到Mutations处理
4.修改State状态

Vuex的使用教程

安装

Vuex4默认支持Vue3，如果使用Vue2要使用Vuex3

npm install vuex@3

引入

这里的main.js引用Vuex，并把Vuex抽取到store.js里面

入口文件

在这里插入图片描述

Vuex的配置文件store.js

import Vue from 'vue'
import Vuex from 'vuex'
//创建核心的store文件
//响应组件的动作
Vue.use(Vuex)
//这里规定了Vuex和组件的交互
const actions={//context是包含了mutations的上下文状态,只有获取了上下文的状态才能提交修改addGames:function(context,value){console.log("接收的值",value)context.commit('adds',value)}
}
//操作数据的状态
const mutations ={adds(state,value){console.log("修改值")state.address=value},getSchool(state,value){console.log("修改值",value)state.shcool=valuereturn state.shcool},addInfo(state,value){let nums = state.numlet obj = {id:nums,name:value}state.datalist.push(obj)state.num=state.num+1}
}
//保存数据
const state = {address:"",//固定值shcool:"社会大学",datalist:[],num:0,do:{岗位:"编程",工资:0}}export default  new  Vuex.Store({actions:actions,mutations:mutations,state:state,getters
})