Vuex快速入门(简单易懂)

　　

　　

<强>,(1)vuex是什么?

　　

1。回来的,借鉴,了通量,榆树架构

　　

2。专为Vue。js设计,的<>强状态管理模式

　　

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

　　

4。Vuex也集成到Vue的官方调试工具

　　

5。一个Vuex应用的核心是商店(仓库,一个容器),存储包含着你的应用中大部分的<>强状态(州)。

　　

<强>(2)什么情况下我应该使用Vuex ?

　　

1。不适用:小型简单应用,用Vuex是繁琐冗余的,更适合使用简单的,存储模式。

　　

2。适用于:中大型单页应用,你可能会考虑如何<强>把组件的共享状态抽取出来,以一个全局单例模式管理,不管在哪个组件,都能获取状态/触发行为强,解决问题如下:

　　

①多个视图使用于同一状态:

　　

传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力

　　

②不同视图需要变更同一状态:

　　

采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝,通常会导致无法维护的代码

　　

<强> (3)Vuex和单纯的全局对象有何不同?

　　

1。Vuex的状态存储是响应式的

　　

当Vue组件从商店中读取状态的时候,若存储中的状态发生变化,那么相应的组件也会相应地得到高效更新。

　　

2。你不能直接改变中存储的状态

　　

改变中存储的状态的唯一途径就是显式地<强>提交(提交)变异强,方便我们跟踪每一个状态的变化。

　　

　　

* vue cli 3中搭建脚手架预设时选择了“vuex”后便安装了vuex,可跳过此步阅读

　　

<强> (1)& lt; script>引入

　　

在Vue之后引入,<代码> vuex> 　　 　　 　　& lt;脚本src=" https://www.yisu.com/path/to/vue.js "祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/path/to/vuex.js "祝辞& lt;/script> 　　 　　

<强>(2)包管理

　　 　　 　　npm安装vuex——保存//纱添加vuex 　　 　　

在一个模块化的打包系统中,您必须显式地通过Vue.use()来安装Vuex:,

　　 　　 　　从“Vue”进口Vue 　　从“Vuex”进口Vuex 　　 　　Vue.use (Vuex) 　　 　　

<强> (3)git克隆自己构建

　　 　　 　　git克隆https://github.com/vuejs/vuex.git node_modules/vuex 　　cd node_modules/vuex 　　npm安装 　　npm运行构建 　　 　　

<>强(4)兼容

　　

Vuex依赖,诺言。如果你支持的浏览器并没有实现承诺(如IE),那么你可以使用一个polyfill的库(如,,es6-promis)

　　

1。你可以通过CDN将其引入,<代码> window.Promise> 　　 　　 　　& lt;脚本src=" https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js”祝辞& lt;/script> 　　 　　

2。包管理器安装:

　　 　　 　　npm安装es6-promise——保存//纱添加es6-promise 　　 　　

然后,将下列代码添加到你使用Vuex之前的一个地方:

　　 　　 　　导入“es6-promise/汽车” 　　 　　

　　

<强>(1)使用介绍

　　

1。搭建店实例

　　

①。在创建vuex实例的地方引入vue, vuex,使用vuex:

　　 　　 　　从“Vue”//进口Vue引入Vue 　　从“Vuex”//进口Vuex引入Vuex 　　 　　Vue.use (Vuex);//使用vuex 　　 　　

②。如果你的行动中用到store.dispath(),要引入店

　　 　　 　　从“进口商店。/存储//引入状态管理商店 　　 　　

③。新的一个Vuex。商店实例,并注册状态,突变,行动,getter到Vuex。商店实例中

　　

　　

p。你可以像上面那样将“属性和值”直接写在实例中,当代码量大时,你也可以分别写个. js文件,如下图:

　　

　　

然后引入到存储/索引。js注册到vuex实例中,如:

　　

　　

2。创建好vuex。存储后,你需要在入口文件主要。js中引入店并注册到vue实例中,这样就可以在任何组件使用存储了:

Vuex快速入门(简单易懂)