一. vuex简介

什么是vuex？

1.借鉴《通量》、《还原》和《榆树建筑》

2.专为Vue.js设计的状态管理模式

3.集中存储和管理应用程序中所有组件的状态

4.Vuex也集成到了Vue的官方调试工具中

5.Vuex应用程序的核心是一个商店(仓库，一个容器)，它包含应用程序中的大部分状态。

(2)在什么情况下应该使用Vuex？

1.不适用：对于小而简单的应用，Vuex比较繁琐和冗余，更适合使用简单的存储模式。

2.适用于中大型单页应用。您可能会考虑如何提取组件的共享状态，并以全局单一模式管理它们。无论哪个组件，都可以获得状态/触发行为。问题如下：

多个视图在同一状态下使用：

对于多层嵌套组件来说，传递参数的方法会非常麻烦，与兄弟组件之间的状态转移无关

不同的视图需要改变相同的状态：

使用父子组件通过事件直接引用或更改和同步状态的多个副本通常会产生可维护的代码

(3)3)Vuex和纯全局对象有什么区别？

1.1的状态存储。Vuex反应灵敏

当Vue组件从商店读取状态时，如果商店中的状态发生变化，相应的组件将相应地得到有效更新。

2.您不能直接更改商店中的状态

改变存储中状态的唯一方法是显式提交)突变，这便于我们跟踪每个状态的变化。

第二，vuex安装

* vuex是在VUECLI 3中设置脚手架时选择“vuex”后安装的，因此您可以跳过此步骤阅读

(1)介绍1)剧本

在vue之后引入Vuex将自动安装：

脚本src=' http :/path/to/vue . js '/脚本脚本src=' http 3360/path/to/vuex . js '/脚本(2)包管理

NPM安装vuex-save//纱线添加Vuex在模块化包装系统中，您必须通过Vue.use()显式安装Vuex:

从“vue”导入vue从“vuex”导入vuex。use (vuex) (3) gitclone自己构建

git clone https://github.com/vuejs/vuex.git节点_ modules/vuexdnode _ modules/vuexnpm安装npm运行构建(4)兼容

Vuex依靠Promise。如果您支持的浏览器没有实现Promise(如IE)，那么您可以使用polyfill库(如es6-promis)

1.你可以通过CDN、和window来介绍它。承诺将自动生效：

script src=' http :https://cdn . jsdeliver . net/NPM/[email protected]/dist/es6-promise . auto . js '/script 2。软件包管理器安装：

NPM安装es6-承诺-保存//纱添加es6-承诺然后，在使用Vuex之前，将以下代码添加到一个地方：

导入' es6-承诺/自动' iii。使用

(1)使用介绍

1.构建商店实例

(1)在创建vuex实例的地方引入vue和vuex，并使用vuex:

从' Vue '导入Vue/从' Vuex '导入vueimport Vuex导入Vuex Vue . use(Vuex)；//使用vuex。如果在操作中使用store.dispath()，请引入store。

从“”导入存储。/store//引入了一个Vuex。状态管理存储的存储实例。新的，并将状态、变化、动作和获取器注册到Vuex中。存储实例

赞美诗您可以在上面的示例中直接编写“属性和值”。当代码量较大时，也可以单独编写一个. js文件，如下所示：

然后将它引入store/index.js并在vuex实例中注册，例如：

2.在创建vuex.store之后，您需要将store引入到条目文件main.js中，并在vue实例中注册它，这样您就可以在任何组件中使用store:

3.使用：

(1)在vuex中引入每个属性对应的辅助函数：

从“vuex”//register action，state，getter导入{map actions，map state，map getters }。使用存储中的状态数据和方法：

有很多方法可以使用它。这种事情是最简单也是最实用的。更多可在官网学习：https://vuex.vuejs.org/zh/

(2)具体演示

做一个容易理解的计数

例如：store.js

从“Vue”导入Vue从“Vuex”导入Vuex//引入来自""的vueximport存储/商店/注册商店vue。使用(Vuex)；//使用vuexexport默认新Vuex .存储({ state: { //初始化状态count: 0，some list 3360[]}，经过必要的修改： { //处理状态增量（状态，有效载荷){ state。计数=有效载荷。step | | 1；} }，actions: { //提交改变后的状态增量(上下文，参数){上下文。国家。计数=参数。步骤；context.commit('increment '，context.state.count)//提交改变后的状态。计数值}，incrementStep({state，commit，rootState }){ if(rootState。数到100){ store。调度('增量'，{//调用增量()方法step: 10 }) } } }，getter s 3360 {//处理列表项somelists 3360状态=param={ return state。一些人。筛选器(()=param。完成)} })使用时，例如：

main.js:

从“vue”导入某视频剪辑软件从“应用程序”导入/App.vue "从导入路由器"。/路由器"从导入存储"。/store//引入状态管理商店Vue。配置。production TiP=false new Vue({ 0路由器，存储，//注册商店（这可以把商店的实例注入所有的子组件)render: h=h(App)}).$ mount(“# app”)视图/home.vue:

模板div class='home '！-在前端超文本标记语言页面中使用count-hello world : msg=' count '/！-表单处理双向绑定count-input :值=' count ' @ input=' incrementStep '/div/模板脚本从@/components/HelloWorld.vue '导入编译从vuex /导入{映射操作、映射状态、映射获取器}注册行为和状态导出默认值{ name: 'home '，computed: { //在这里映射存储。状态。计数使用方法和计算里的其他属性一样.mapState([ 'count' ])，count(){ return store。国家。count } }，created(){ this。incrementstep()；}，methods: { //在这里引入行为里的方法，使用方法和方法里的其他方法一样.mapActions([ 'incrementStep' ])，//使用对象展开运算符将吸气剂混入计算对象中.mapgetter([' someLists '//.]) },组件3360 { hello world } }/脚本运行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。