【Vuex的工作原理图】通解工作原理+搭建Vuex工作环境_vue框架组件路由 vuex 的架构图-CSDN博客

本文链接：https://blog.csdn.net/m0_46672781/article/details/125260914

本文详细介绍了Vuex的状态管理库的工作原理，通过生活中的例子来类比，包括状态、视图和操作的概念。文章还逐步指导如何搭建Vuex环境，从安装、引入到创建store，以及定义actions、mutations和state。最后，展示了在main.js中如何将store注入到Vue实例中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex的工作原理图

在这里插入图片描述
个状态自管理应用包含以下几个部分：

状态，驱动应用的数据源；
视图，以声明方式将状态映射到视图；
操作，响应在视图上的用户输入导致的状态变化。

生活中的例子（客人->{老板开的饭店：服务员,后厨，饭菜}）这样的一个关系

搭建Vuex工作环境

npm i vuex(npm i vuex@3)指定版本
引入
使用（Vue.use(Vuex)）
store
vc ⇒ store

//引入插件
import Vuex from 'vuex'
Vue.use(Vuex)
// 也就是创建了一个store

vuex写法：
该文件用于创建Vuex中最为核心的store
在这里插入图片描述
脚手架解析import顺序：
不管import在那个地方，都会一次性汇总到一个最上方进行遍历执行

所以在这个index,js里面就应该做成这样：

//引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
//使用插件
Vue.use(Vuex)
// 准备actions ---用于响应组件中的动作
const actions = {}

// 准备mutations ---用于操作数据（state）
const mutations = {}

// 准备staet ---存储数据（state）
const staet = {}

// 创建store
export default new Vuex.Store({
    actions:actions,
    mutations:mutations,
    staet:staet
})

// export default store

也即是：

3.搭建vuex环境

创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

2、在main.js中创建vm时传入store配置项

......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})