vue2.0探索之路--vuex使用场景和集成_vue2 vuex一般用在什么场景

 emmm...一直在犹豫要不要写这篇博客，因为觉得这些内容官网已经介绍的很详细了，再复述一遍貌似没太多意义。后面想了下，不复述、总结，如何加深自己的印象和理解呢，毕竟老年人，记性越来越差了。所以，开始吧。

一、概述

   vuex是一个专为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、使用场景

  我相信很多人都和我一样，在使用vuex之前都会想一个问题(如果你一开始就很明确自己对vuex的需求，那么恭喜你，你很棒棒)，为什么要用vuex？？？？这玩意有啥好的，除了听着高大上点，状态管理，那么具体能给我的项目带来什么好处啊，而且我改怎么用它。下面就来简单说说我的理解。

状态管理，就是管理的全局变量。在我们的项目中，特别是较大型的项目，会有很多参数是很多地方都会用到的，比如，一个登录的token，很多页面都需要这个信息，当然我们可以时刻在对应页面操作cookie，但是有这么个统一管理的地方，为啥不用呢。所以，状态管理不是必需的，所有状态管理能做的，都能用其他方式实现，但是状态管理提供了统一管理的地方，操作方便，也更加明确。但是别啥都往里头扔了，一些只是父组件和子组件用到的，能用$emit和props简单实现的，就用这个就行了。

三、集成

先贴上我的集成代码：

目录结构

index.js为总入口

getters：state中的状态获取

user.js

api中为请求统一封装

下面开始对vuex的相关功能做个总结，详情请参考：vuex官网。

1. state

存在mapState辅助函数，见第六小结

import Vue from 'vue';
import App from './App';
import store from './store/index'
import './mock/mock';
 
import router from './router';
 
import './ui.js'
 
/* 公共服务平台*/
import 'static/platform/css/common.less';
 
var vm = new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: {App}
});

在根组件注册store之后，可以在组件中通过this.$store.state.count访问state中的count参数，在模块中，需要在state后面加上模块名，详情见第五小节。

2.Getter

有时候我们需要从store中的state中派生出一些状态，可以通过在store中定义getter(可以看作store的计算属性)，Getter接受state作为第一个参数 ，也可以接受其他getter作为第二个参数。存在辅助函数mapGetters，见第六小结

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
 

然后可以通过以下方式访问

this.$store.getters.doneTodos

3. Mutation

 提交mutation是修改store中的状态的唯一方法。通过提交mutation，vue能监控到数据的变化，然后动态更新节点。

定义：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

调用（可传入第二个参数作为入参）：

store.commit('increment')

对象风格的提交方式:

store.commit({
  type: 'increment',
  amount: 10
})

也可以使用常量替代Mutation事件类型

//mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION';
 
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
 
const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

需要注意：Mutation必须是同步函数。

4.Action

Action类似于mutation，不同在于：

<span style="font-size:16px;">1.Action提交的是mutation，而不是直接变更状态；

2.Action可以包含异步操作。</span>

示例：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

action函数接受一个与store实例具有相同方法和属性的context对象。可以使用参数解构简化代码：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

分发Action：

store.dispatch('increment')

异步操作：

actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求，然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

存在mapActions辅助函数，详见第六小结

5.Module

为了解决store对象随着项目开发会越来越臃肿，vuex允许将store分割成模块，每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块--从上至下进行同样方式的分割。例如

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
 
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
 
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

6.辅助函数

mapState

普通写法：

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
 
export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
 
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
 
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

或者

mapState([
 // 映射 this.count 为 store.state.count
'count'
])

对象展开运算符

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

mapGetters

import { mapGetters } from 'vuex'
 
export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

mapActions

import { mapActions } from 'vuex'
 
export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
 
      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

四、最后

总算总结完了，又加深了一遍记忆，还是很好的。