Vuex的工作原理图通解工作原理+搭建Vuex工作环境

Posted 2022-06-27 勇敢*牛牛

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环境

1. 创建文件：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
)