Vuex是什么
🤔 官网对它的解释：每一个vuex的核心就是store，store基本上是一个容器，它包含着应用中的大部分状态（state）
Vuex是一个专为vue.js应用程序开发的状态管理模式。
这个状态自管理应用包含以下三部分：
① state 驱动应用的数据源
② view 以声明的方式将state映射到视图
③ actions 响应在view上的用户操作导致的状态变化
什么场景需要用到Vuex
- 用户的登录状态、名称、头像、地理位置等
- 购物车中的商品及收藏的商品 综上以及……一系列可能涉及到多个视图依赖一个状态，或来自不同视图的行为需要改变同一个状态的场景都可以使用Vuex！
Vuex和全局变量的区别
🤯 全局变量：Vue.propertype上的数据是静态的，只能通过手动修改，使用这些数据的组件不会重新渲染，需要手动渲染，相当于在Vue对象上增加一个全局属性，容易造成变量污染。
😇 Vuex：vuex中的数据是响应式的，只要store中数据更新，就会立即渲染使用store的组件，想要修改store中的数据，要经过action/mutation层，层次划分明确，便于管理,这些状态信息可以防止统一的地方进行保护管理，并且这些数据是响应式的
🤪 对Vuex的简单介绍就到这里！
如何安装Vuex
进入项目打开命令行，输入npm install vuex --save回车进行安装。
然后配置 vuex，使其工作起来：在src路径下创建store/index.js文件：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 定义字符串name，以供全局使用
name: '张三'
},
});
export default store;
修改main.js：
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store'; // 引入前面导出的store对象
new Vue({
el: '#app',
router,
store, // 把store对象添加到vue实例上
components: { App },
template: '<App/>'
});
最后修改App.vue：
<template>
<div></div>
</template>
<script>
export default {
mounted() {
// 使用this.$store.state.XXX可以直接访问到仓库中的状态
console.log(this.$store.state.name);
}
}
</script>
🤩 在命令行中键入npm run dev启动项目，天呐！你这了不起的家伙，不到一盏茶的功夫竟然把一个vuex项目运行起来了！快来控制台看看刚才我们定义在store中的name的值吧！
🤩 好伙计，接下来我们就要开始学习一点更高级的用法！
