Vuejs学习笔记--Vuex笔记
1.Vuex的概念和使用
1.1 Vuex就是状态管理工具
- 多个组件共享一个变量，将共享的变量集中管理，这就是状态管理
1.2 常见的状态管理
- 用户的登录状态
- 你去服务器请求数据，有一些数据是只针对登录用户的。
- 这个时候请求服务器数据，请求参数必须携带token。
- 多个界面请求数据的时候，都需要携带token。
- 这个token来自于用户登录成功后，服务器返回给用户的。
- 我们可以将token放在vuex当中。
- 用户名称
- 用户头像
- 用户地理位置信息
- 商品的收藏
- 购物车中的物品
2.单页面状态管理
2.1 理解
state：状态的意思。状态是用变量保存的。在vue中，变量一般保存在data中。state相当于data中的变量。
state是在view中显示的。
view当中可以产生actions，比如用户发生了点击。
actions反过来会修改state，例如点击的事件函数当中修改data当中的变量。
3.多界面状态管理（Vuex）
3.1 安装插件
npm install vuex@3.0.1 --save
3.2 创建单独文件
在src文件夹下单独创建store文件夹，在store文件夹下创建index.js文件
3.3 创建store实例及Vue实例中引入
3.4 store对象包含的内容
- state，是一个对象，用来保存状态的，类似于Vue对象中的data数据。
- mutations，是一个对象，修改state的方法，类似于Vue对象中的methods方法。
- actions，是一个对象，。
- getters，是一个对象，类似于Vue对象的computed计算属性。
- modules，是一个对象，划分模块，根据模块进行相关数据保存，类似于一个store的小号（单一数据源的解决方案）。
4.Vuex核心概念--store对象内容详解
4.1 state（基本使用，单一状态树）
4.1.1 在其他组件中通过 this.$store.state.属性 的方式访问状态。
4.1.2 单一状态树（单一数据源）：最好使用一个store对象
4.2 getters（基本使用(默认参数state)，getters作为参数(state,getters)，getters传递其他参数(返回一个函数)）
4.2.1 基本使用：在store对象的getters中定义一个函数（方法默认参数state），在组件中通过 $store.getters.函数名 使用
4.2.2 getters作为参数使用
4.2.3 getters传递其他参数：如果你的 getters 想要别人传参的情况下，你的 getters 就要返回一个函数
4.3 mutations（基本使用(默认参数state)，传递参数(this.$store.commit ( 'mutations中的方法' ,参数) )，多个参数传递时可将参数放在一个对象中就行)）
4.3.1 基本使用：通过 this.$store.commit ( 'mutations中的方法' ) 来修改状态
4.3.2 传递参数：
1>组件内按钮
2>组件内的方法
3>store对象当中的mutations中的方法
4.4 mutations的提交风格
4.5 mutations响应式原理
- 原来定义的属性，可以响应式
- 追加对象属性，使用vue.set
- 删除对象属性，使用vue.delete
4.6 mutations的类型常量（抽离方法名称进行单独管理，项目大了有用）
4.6.1 搞一个文件mutations-types.js，然后在文件中，这样写：
4.6.2 当我们需要在组件中，进行mutations的commit提交的时候，我们导入mutations-types.js当中的常量
4.6.3 在methods当中，提交mutations的时候，写方法事件的时候，我们就可以使用下面的方式
4.6.4 在./store/index.js当中的mutations当中的方法，是可以写成下面的格式的：
4.7 actions（基本使用(默认参数(context)，对比mutations操作，传递参数payload(普通参数，回调函数，普+回调)，）
actions是类似于mutations，是进行异步操作的。context可以先简单看做是state
vue官网推荐我们，不要在mutations当中进行异步的操作，不然的话，devtools就失效了。
4.7.1 基本使用
4.7.2 对比mutations修改的操作
我们原来是通过按钮来修改state当中的对象属性。
- 点击按钮
- 执行按钮当中的事件函数
- 事件函数当中执行this.$store.commit()
- commit当中写的是mutations当中的方法的名字
现在我们是通过actions来提交了commit，我们的正确的业务实现的顺序，应该是这样的。
- 点击按钮
- 执行按钮当中的事件函数。
- 事件函数当中执行this.$store.dispatch
- 为什么是dispatch请看下面的图
- 然后在dispatch()当中写的是actions当中方法的名字。
- actions的方法当中写的是commit
- commit当中写的mutations当中的方法的名字
- 执行mutations当中的方法，修改了state。
4.7.3 传递参数（使用payload来承接参数）--普通情况
4.7.4 传递参数（使用payload来承接参数）--参数是回调函数
4.7.5 传递参数（使用payload来承接参数）--普通参数+回调函数
传统解决方案：对象{普通参数+回调函数}
通过Promise方式
第一步：组件当中调用$store.dispatch的时候还是正常地传参。然后在actions当中进行commit的时候还是正常地commit。
第二步，现在是想要用一种优雅地方式，在commit之后，回调给组件调用的地方。
我们是在actions当中返回了一个promise对象。
然后是在组件的事件函数当中写了一个then。
4.8 modules（基本认识，获取数据方式($store.state.modules下定义的变量名.属性名)）
4.8.1 基本认识
4.8.2 演练和获取数据方式
我们定义了一个moduleA，然后我们在moduleA当中设置一些状态
我们定义了一个名字，叫做zhangsan
第三步，我们在页面当中进行演示
通过下面的两张图，我们知道modules当中的玩意，最后都会放到state当中的。看一下第一张图当中的a的object
所以，我们在页面当中进行展示的时候，是这样来获取的：
4.9 模块中的mutations方法（先去store对象的mutations找，再去模块中mutations找）
注意，虽然我们的mutations是定义在模块当中的，但是我们提交的时候，还是正常地提交，一般情况下会先去store对象的mutations当中去寻找，有没有对应的方法，如果没有的话，就会去模块当中的mutations当中去寻找对应的方法的。
注意，我们直接写在state对象当中的mutations方法，和我们直接在模块当中写的mutations方法，一般情况下，方法的名字是不要重复的哦。
第一步，在模块当中我们写一个updateName方法
第二步，我们在页面当中，写一个button，绑定一个事件函数，然后在函数当中，我们应该进行commit。
4.10 模块中的getters方法（跟mutations使用方法一样，先找store再看模块。有区别的是模块的getters使用store对象下的state，要 通过rootState.属性名 获取，下图示例）
在模块的getter当中，第一个参数是state，第二个参数是getters，第三个参数是rootState。
4.11 模块中的actions（commit到模块自己的mutations当中）
actions就是进行一些异步操作。
第一步，我们在actions当中写一个方法，actions当中的方法，有一个参数，叫做context。
- 在模块当中的，actions当中的，方法的参数，context参数，这个就不是store对象了。
- 在store对象当中的，actions当中的，方法的参数，context参数，这个就是store对象。
store对象的commit，就是我们store对象当中，直接写的mutations。
但是我们模块当中的actions当中的context，只有commit到模块自己的mutations当中的。
第二步，我们在组件当中设置一个按钮。 
第三步，我们在组件的methods当中定义一个事件的方法：
效果：
点击了按钮之后，异步修改名字：
模块当中的actions当中的context就会提交到模块当中的mutations当中的。
我们可以打印一下context对象。
从上面我们可以看到从context当中拿到rootGetters，从context当中拿到rootState。
5 store文件夹目录结构
state：不单独抽离，只会放在new Vuex.Store 实例对象外面
getters：抽离单独一个文件
mutations：抽离单独一个文件
actions：抽离单独一个文件
modules：抽离单独一个文件夹，文件夹中放一个个的模块文件
通过 export default 导出，以及通过import导入，示例如下：
浙公网安备 33010602011771号