vuex简介、工作原理及基本使用

一、Vuex概要：

Vuex

是专门针对在vue中同时实现封闭式状况（统计数据）管理组织工作的两个vue应用领域程序，对vue应用领域中数个模块的共享资源状况展开封闭式的管理组织工作（读/写），也是一类模块协同组织工作的形式，且适用于于任一模块间的通讯，可以方便快捷的同时实现模块间统计数据的共享资源。

vuex简介、工作原理及基本使用

采用Vuex标准化管理组织工作状况的益处：

能在vuex中INS13ZD共享资源的统计数据，更易合作开发和中后期保护

能高组织工作效率地同时实现模块间的统计资源共享资源，提升合作开发组织工作效率

储存在vuex中的统计数据都是积极响应式的，能动态保持统计数据与网页的并行

怎样的统计数据适宜储存到Vuex中

通常情况下，多于模块间共享资源的统计数据，才有必要性储存到vuex中；数个模块倚赖同两个状况。

源自相同模块的犯罪行为须要更改同两个状况。

对于模块中的私有统计数据，依旧储存在模块自身的data中即可

二、Vuex的组织工作基本上原理

vuex简介、工作原理及基本使用

类比生活，能认为：vueComponents是餐厅吃饭的客人，Actions：是服务员，Mutations：是后厨，State：是菜

vuex简介、工作原理及基本使用

假如你和这个餐厅里面的菜也很熟，能直接找到后厨做菜，也就是说我们能直接调用方法触发mutations，如果这个餐厅菜单更改了，之前的菜没有了，那就只能找服务员来点单，此时类比基本上原理图就是必须调用dispatch触发actions。

三、Vuex的基本上采用，搭建Vuex环境

1、安装vuex依赖包（2022年2月vue3成为了默认版本，当我们执行npm i vue，会默认安装vue3版本，vue3成为默认版本的同时，vuex也更新到了4版本，此情况下执行下方命令会安装成vuex的4版本，而此版本只能在vue3中采用。）

综述：vue2中，要用vuex的3版本，vue3中要用vuex的4版本

npm install vuex@3 –save

2、导入vuex包

import Vuex from vuexVue.use(Vuex)

3、创建store对象

const store = new Vuex.store({//state中存放的就是全局共享资源的统计数据 state: { count:0 }})

4、将store对象挂载到vue实例中

new Vue({ el:#app, render:h=>h(app), router, // 将创建的共享统计数据对象，挂载到vue实例中 store})

通常情况下，会单独放到两个文件里，在src下创建store文件夹，在其下创建index.js

// 引入vue核心库import Vue from vue// 引入Vueximport Vuex from vuex// 应用领域Vuex应用领域程序Vue.use(Vuex)// 创建并暴露storeexport default new Vuex.store({ actions:{},// 积极响应模块中用户的动作 mutations:{},// 修改state中的统计数据 state:{},// 保存具体统计数据})

在main.js中引入，并挂载到vue实例中

import store from ./store// 或者 import store from ./store/index.js // 通常情况下index.js能省略new Vue({ el:#app, render:h=>h(app), router, // 将创建的共享资源统计数据对象，挂载到vue实例中 store})

相关文章

微信