Vuex 快速入门快速入门(简单易懂简单易懂)
主要介绍了Vuex 快速入门(简单易懂),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小
编过来看看吧
一、一、vuex介绍介绍
((1))vuex是什么?是什么?
1. 借鉴 了Flux、Redux、 The Elm Architecture
2. 专为 Vue.js 设计 的状态管理模式状态管理模式
3. 集中式存储和管理应用程序中所有组件的状态
4. Vuex 也集成到 Vue 的官方调试工具
5. 一个 Vuex 应用的核心是 store(仓库,一个容器),store包含着你的应用中大部分的状态状态 (state)。
((2)什么情况下我应该使用)什么情况下我应该使用 Vuex??
1. 不适用:小型简单应用,用 Vuex 是繁琐冗余的,更适合使用简单的 store 模式。
2. 适用于:中大型单页应用,你可能会考虑如何把组件的共享状态抽取出来,以一个全局单例模式管理,不管在哪个组件,把组件的共享状态抽取出来,以一个全局单例模式管理,不管在哪个组件,
都能获取状态都能获取状态/触发行为触发行为,解决问题如下:
① 多个视图使用于同一状态:
传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力
② 不同视图需要变更同一状态:
采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝,通常会导致无法维护的代码
((3))Vuex 和单纯的全局对象有何不同?和单纯的全局对象有何不同?
1.Vuex 的状态存储是响应式的
当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
2.你不能直接改变 store 中的状态
改变 store 中的状态的唯一途径就是显式地提交提交 (commit) mutation,方便我们跟踪每一个状态的变化。
二、二、vuex安装安装
* vue cli 3 中搭建脚手架预设时选择了“vuex”后便安装了vuex,可跳过此步阅读
((1))<script>引入引入
在 Vue 之后引入 vuex 会进行自动安装:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
((2)) 包管理包管理
npm install vuex --save //yarn add vuex
在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
((3))git clone 自己构建自己构建
git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build
((4)兼容)兼容