vuex的工作流程

简述Vuex工作流程

vuex的使用

什么是Vuex

1. 专门为Vue应用程序开发的状态管理模式；
   状态可以理解为数据，其实就是用来管理数据的

2. 采用集中式存储管理应用的所有组件状态；
   在做一个webApp的时候，在里面会牵扯到很多数据，这个时候我们可以集中式的管理这些数据

3. 以相应的规则保证状态以一种可预测的方式发生变化
   当组件中有交互改变数据的时候我们就以一种规则去改变这种状态，这个时候我就可以对状态进行预测，比如说从A状态到B状态，那么这个时候我们是可以预测的不至于很混乱，当然在Vuex中会有些限制规则我们必须按照这些规则来改变状态

状态

1. 组件内部状态：仅在组建内使用的状态（data字段）
   不能共享，只能在内部使用
2. 应用级别状态：多个组件公用状态
   A组件中应用这个数据，B组件也用这个数据，通常把这种状态挡在Vuex里面进行统一管理

什么情况下使用

1. 多个视图依赖同一状态：
   A组件，B组件 ，C组件用的是同一套数据，这个时候我们就需要放在Vuex中进行统一管理。
   如果多个视图是同一级的不存在嵌套关系，我们可以不使用Vuex，只需要通过父组件传递到每个子组件即可；如果组件深层嵌套，那么用Vuex将会更加方便，我们只需要在Vuex中拿就可以了。
2. 来自不同视图的行为需要变更同一状态
   用户操作A组件去改变B组件的状态，这个时候我们需要通过修改Vuex中的数据，Vuex中的数据是响应的，那么就会改变和它相关的组件状态。

备注：
在项目当中并不是说非要使用Vuex，而是根据你所写的项目大小以及数据交互的程度来决定，是否需要使用Vuex，如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

使用步骤

1. 安装

npm i vuex

2. 使用
   在src下创建一个store文件夹
   里面建一个index.js
   

//index.js内容

import Vue from 'vue'	//引入vue
import Vuex from 'vuex'	//引入vuex
Vue.use(Vuex)

//定义一个容器
const store = new Vuex.Store({
    state:{
        			//存放数据
    },
    mutations: {
       				//获取数据
    }

})

3. 入口文件（main.js）引入

import store from './store'

4. 注入Vue根实例

new Vue({
  el: '#app',
  router,
  store,	//挂载上store
  components: { App },
  template: '<App/>'
})

核心概念

1. store
   类似容器，包含了应用的大部分状态
   一个页面只能有一个store
   状态存储只能是响应式的：当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. state
   包含所有应用级别状态的对象

const store = new Vuex.Store({
  state: {
    count: 100 // 这里的 count 就是状态，之前称之为数据  （数据 === 状态）
  }
})

通过计算属性去获取仓库中的数据

computed: {
    num () {
      return this.$store.state.count
    }
  }

3. mutations
   不能直接改变store中的状态，触发变化也仅仅是在组件的 methods 中提交 mutation，是唯一途径。
   Mutation 必须是同步函数
   Mutation 需遵守 Vue 的响应规则
   既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：
   • 最好提前在你的 store 中初始化好所有所需属性。
   • 当需要在对象上添加新属性时，你应该
     • 使用 Vue.set(obj, ‘newProp’, 123)
     • 以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：
       state.obj = { …state.obj, newProp: 123 }

this.$store.commit('addIncrement', 5)

4. getters
   在组件内部获取store中的状态函数，有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数，对购物车中的数据进行数量及总价的计算，可以认为是 store 的计算属性，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

// Store.js
getters: {
    filterCount (state) {
      return state.count >= 120 ? 120 : state.count
    }
  }
// increment.vue - 组件中
computed: {
    num1 () {
      return this.$store.getters.filterCount
    }
}

5. actions
   包含异步操作，提交mutations改变状态
   在触发action的时候，我们接受了一个参数context，它是一个对象并不是当前实例，只不过是这个对象里面包含当前实例的方法

mutations: {
    // 同步
    addIncrement (state, payLoad) {
      console.log(payLoad)
      state.count += payLoad.n
    },
    // mutation直接写异步的问题：mutation里面直接写异步，会造成Vuex状态无法预测
    // addIncrement (state, payLoad) {
    //   setTimeout(() => {
    //     state.count += payLoad.n
    //   }, 1000)
    // },
    deCrement (state, payLoad) {
      console.log(payLoad)
      state.count -= payLoad.n
    }
  },
  actions: {
    addAction (context) {
      setTimeout(() => {
        context.commit('addIncrement', { n: 5 })
      }, 1000)
    }
  }

6. modules
   将Store分割成不同模块

// 分割模块 - 1
let selectModule = {
    state: {},
    mutations: {},
    actions: {},
    getters: {}
}
let store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    getters: {},
    modules: {
        selectModule // 模块引用
    }
})

工作流程

绿色虚线框是属于Vuex的范围
首先从API中拿数据，就会牵扯到异步操作，所以我们把异步操作定义在action中，在组件中触发一个action，action里面有一个ajax请求，去请求后端的一个接口，拿到数据以后我们只需要改变state中的状态就可以了，改变状态的唯一方式是commit提交一个mutation，提交以后state状态改变了，状态改变后视图就会改变因为Vuex是响应式的。

---