Vue全家桶之Vuex-优快云博客

Vue全家桶-vuex

1.什么是Vuex?

1.官方解释：Vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2.状态管理是什么？
你可以简单的将其看成是把多个组件共同需要的变量全部存储在一个对象里，然后你把这个对象放在最顶层的vue实例中，让其他组件使用，这样多个组件就可以共享这个对象中的所有变量属性
3.有什么状态需要我们在多个组件之间共享呢？
用户的登录状态、用户名称、头像、地理位置、商品的收藏、购物车中的物品等，我们都可以将其放在Vuex中，对其进行保存和管理，而且他们还是响应式的

2.如何安装Vuex?

npm install --save vuex

3.如何使用Vuex?

3.1首先在我们的src目录下创建store目录项，并在该目录下创建接口文件index.js

3.2 在接口文件index.js下引入并使用Vuex插件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({

})

3.3在项目的接口文件main.js中，引入并挂载我们实例化的store对象

补充：单界面管理状态和多界面管理状态

1.单界面管理状态
在这里插入图片描述
（1）state：状态（你可以将其看做是当前组组件的data中的属性）
（2）View：视图层，可以针对State的变化，显示不同的信息
（3）Actions：这里的Action主要是用户的各种操作如点击、输入等，导致我们的State发生变化
2.多界面管理状态
vue已经帮我们做好了单个界面的状态管理，但是多个界面都试图依赖同一个State（一个状态改变，多个界面同时进行更新），不同界面的Action都想修改同一个State,此时Vuex就提供了这样的功能，将多个组件共享的状态抽取出来，交给Vuex统一管理。之后，每个组件按照Vuex规定好的方式来进行访问和修改。
3.vuex的状态管理图
在这里插入图片描述 #### 3.4为了达到我们Vuex功能清晰明了，我们根据vuex状态管路图对store目录进行基本划分

3.4 state

state同来存放我们从服务器请求过来的一些公共组件公用的状态对象

补充：单一状态树

（1）单一状态树就是单一数据源的意思（通常来说，我们只有一个Store对象，Store对象中只有一个state对象）
（2）如果你的状态信息是保存在多个Store对象里的，那么之后的管理和维护等等都会变得特别困难
（3）所以Vuex也使用了单一状态树来管理应用层级的全部状态
（4）单一状态树能够让我们最直接的找到某个状态片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护
（5）代码结构：

/*
State:状态对象
 */
export default {
  info: {}, // 商家信息
}

3.5 mutations

（1）vuex的store对象状态更新的唯一方式：提交Mutation
（2）mutation主要包括两部分：
-事件类型（type）
-一个回调函数，调用该函数的第一个参数就是state
（3）mutation的定义方式：

mutation :{
  increament(state){
    state.count++
  }
}

（4）组件中通过mutation提交更新：

increase: function () {
  this.$store.commit('increament');
}

上述commit进行提交是一种普通方式，vue还提供了另一种风格，它是一个包含type属性的对象,此种方法为我们提供了传参的功能

increase: function () {
  this.$store.commit({
  	type:changeCount,
  	count:100
  });
}

此种提交方式，Mutation中的处理方式是将commit中的对象作为payload使用，达到我们传递参数和处理参数的目的

mutation :{
  changeCount(state，payload){
    state.count = paylo。count；
  }
}

（5）mutation的响应规则
Vuex中的store中的state是响应式的，当state中的数据发生变化时，Vue组件也会自动更新，这也就是我们为什么遵守一些Vuex对应的规则：
-提前在state中初始化所需的属性
-当给state对象中增加新属性时，使用以下两种方式：*使用Vue.set（obj,‘new’,123）
*用新对象给旧对象赋值
在这里插入图片描述
（6）mutation常量类型

在上述（3）、（4）中我们可以看到组件中mutation的提交和mutation的相关操作的type值是相同的，为了防止我们在书写代码时二者写的不一致导致错误出现，我们新建一个mutation-types.js文件，用来定义mutation常量，然后在提交对应mutation操作的组件和mutation中分别倒入此常量类型并对之前的事件类型做替换即可

3.6 actions

通常情况下，Vuex要求我们Mutations里面的方法必须是同步方法，主要原因是当我们使用devtools时，可以帮助我们捕获mutations的快照，但是如果是异步操作，那么该工具将不能很好的追踪这个操作什么时候被完成，所以通常情况下，不要在mutations中进行异步操作，但是某些情况下我们又希望在Vuex中进行异步操作，比如网络请求，此时Actions就类似于Mutations，但是它是用来代替Mutations来进行异步操作的。
（1）组件进行actions提交

this.$store.dispatch('getShopInfo')

（2）actions中进行异步操作

/*
Action:通过操作mutation间接更新state的多个方法的对象
 */
import {
  RECEIVE_INFO,
} from './mutation-types'

// api接口
import {
  reqShopInfo ,
} from '../api'
import mutations from "./mutations";

export default {
  // 异步获取商家信息
  async getShopInfo({commit}) {
    const result = await reqShopInfo()//请求数据
    if (result.code==0) {
      const info = result.data
      commit(RECEIVE_INFO,{info})
    }
  }
}