# Vuex入门
# 什么是vuex
vuex是一个专门为vue.js应用程序开的状态管理模式 它采用集中式存储管理应用的所有组件的状态 并以相应的规则保证以一种可预测的方式发生变化 总结：vuex 就是类似于全局对象存储的所有组件里面的状态，并且是个响应式的状态
# 应用场景
1、多个视图依赖于同一状态 2、来自不同视图的行为需要改变同一状态 总结： a) 不同的组件都依赖于同一个数据状态，实现了多个组件数据共享的作用（读）（如用户登陆） b) 在不同的组建中，需要一些操作来改变数据状态（改）（如购买会员） c) 比较适合中、大型的前端单页面项目，不适用小的
# 组成介绍
State --数据仓库，所有的数据都存储于state中，数据唯一源（存储vue所有状态数据），属于 json 对象
getter --用来获取数据的，相当于vue的computed
Mutation -- 用来修改数据的，本质相当于一个function。数据一定要写成同步的
Action --用来提交mutation数据，可以异步提交
# 安装
安装vuex 安装vuex包：npm install vuex 创建vuex实例：new Vuex.store()
main.js中将vuex实例挂载到vue对象上
vuex是vue的一个重要知识点 要先安装 vue-cli （脚手架）才可以
vue create vuex-demo
code . 命令用不了，好像需要vscode，安装一个吧，以后开发用得上 感谢：mac vscode 下载安装与配置 https://www.jianshu.com/p/90d83f81b78a 然后，感谢 mac vscode -bash: code: command not found https://blog.csdn.net/qq_27848323/article/details/105739272 安装了这个命令之后，可以通过 code . 打开了。
我可以在本地起服务了！Woooooooooooooo~ cd进入可以起服务的项目文件夹，然后运行 npm run serve
在chrome用vue tool调试，我已经安装了
另起一个在该文件夹位置的终端窗口，输入 npm add vuex
很多错误都是不起眼的错误，注意拼写和大小写T_Ts
# 实现count++
实现count++，demo基本思路
- state 中创建 count 字段
- mutation 中创建一个 count++ 的 mutation
- button 新增 click 事件触发，触发 mutation ，改变 count
注释组件时，报错了，原来是——引用组件不使用就会报错
https://www.imooc.com/qadetail/335252
解决：
是 eslint 代码检查到你注册了组件但没有使用，然后就报错了。你可以在package.json文件中
eslintConfig 字段下的 rules 添加规则 "vue/no-unused-components": "off" 就可以解决这个问题
看到的问答，一知半解，呜呜呜呜呜： 问题： 为什么在组件中我们获取vuex中的实例的count值时，还需要用this,在veiw模板中直接填值，不是直接就行了； 老师解答： 第一种，如果是你是直接获取vuex store实例，首先Vue.use(Vuex)就已经吧 store类的实例挂载到 最外层Vue实例上了，所以需要this.$store就能沿着作用域链获取 store类的实例 第二种，如果借助 vuex的 mapstate等辅助函数方式，结果是把 store里面的数据以computed,或者methods呈现，此时的 this.count 实际是指向的computed放回的值 第三种， 如果你是用moudel形式直接引入store类的实例，就不需要this, 方式 import store from ''/src/store.js script中 可以直接 store.state.count 获取count的值