Vuex 是 Vue 团队提供的状态管理模式.。换个维度来说,就是针对 Vue.js 提供的数据驱动解决方案。
当我们掌握 Vue 后就会发现组件间的数据交互非常复杂,当我们提供一个单页应用的时候数据也不能复用、共享,这些问题随着你的 Vue 应用的复杂度而变的格外突出。
维护一个大型的 Vue 项目也是非常头疼的事情,因为数据和展示黏合在一起,这对二次开发也越发的困难,这些都是 Vuex 要解决的问题.
还有一个概念需要大家预先了解的,Vuex 走的是单向数据绑定模式,我们都知道 Vue 是双向绑定的,这两者还是有点区别的,因为在很多时候单向数据流会更安全、可靠一些。
为什么 Vuex 如此重要呢?
使用 Vue 完成一个相对复杂的产品后,你就会发现有大量组件需要重用,尤其是嵌套很多层的组件的场景,这个时候在某个组件中调用数据简直就是灾难。
只要你体验过 Vuex 你就会发现使用 Vue 开发大型、复杂的产品也变得同样容易了。使用的越多,你会发现 Vuex 让 Vue 变得更流行
Vuex 底层的设计思想,借鉴了 Flux、Redux,所以基本上你掌握了 Vuex,以后学习 React 也会很容易的。道理都是一样的
下图可以很好的演示 Vuex 的数据流和核心概念:
安装
NPM
npm install vuex --save
Yarn
yarn add vuex
cnpm
cnpm install -save vuex
配置
安装完vuex依赖后,我们开始进行 vuex 的入门配置,基本上后续的 vuex 工作都和这个配置有关系。
1.创建一个 store
一般 store 文件存放在 src/store 目录,现在我们创建 src/store/index.js 文件,内容如下
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state:{}
})
2.找到 vue 工程的 src/main.js
我们把刚才创建的 store 文件导入进去
import store from './store';
// Vue实例化这里把 store 加入进去
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
如果是创建全新工程
如果你现在是创建一个新工程,那么就更简单啦,使用官方推荐的vue cli 这个工具即可
首先你要先安装好 vue cli
npm install -g @vue/cli-service-global
创建包含 vuex 的新工程
- 打开终端软件(如果是window电脑,请使用 git-bash 软件)
- 在终端里进入你的常用编程目录,比如 cd /d/work
- 继续执行命令 vue create hello-world,创建一个hello-world 工程
- 按回车键后,进入选择页面(可以用键盘的上下键进行移动,按空格键选中)
- 选择Manually select features,并按回车键
- 选择:Babel、Router、Vuex、Linter/Formatter,并按回车键
- 继续按回车键
继续按回车键
继续按回车键
继续按回车键
继续按回车键
等待下载完成后,看到如下画面就成功啦
vue.config.js 配置
在我们本地开发的时候,基本上都会结合真实的域名(不了解的同学可以去看看本地 host 如何绑定自定义域名)来测试的,所以需要额外配置一下 Vue 工程的 devServe配置
因为大多数工程都是基于 Vue cli 搭建的,所以我们只需要在工程目录下创建 vue.config.js 文件,填入如下内容即可
```javascript
module.exports = {
devServer: {
disableHostCheck: true,
host: "0.0.0.0"
}
};