vuex详解

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

  对于一个大型的项目，数据管理尤为重要，个人觉得采用vuex还是很有效率的。

   store相当于中央仓库的概念，一个应用一个中央仓库，所有的数据都储存在这个中央仓库，仓库里面具体的数据都存放在state里面。

 

 

  项目中会存在着大量的数据源，分门别类放好，避免互相干扰，影响开发。代码如下

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production', //在非生产环境下，使用严格模式
  modules: {
    user1,
    user2
  }
})

 

 

  项目中用到数据的时候跟计算属性绑定，这样可以实现响应式开发 

  在页面可以通过{{user}}取到这个数据，但是如果大量写这种大量计算属性会觉得很繁琐。 vuex提供了mapState函数

    computed: {
      user(){
        return this.$store.state.user;
      }
    }

 

以官网代码解释
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
//在mapState里面我们不需要通过this.$store.state来取值，直接通过state。
//这样是不是很方便
//其他可以详见vuex官网，相信大家很容易就可以看懂
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

 

 // 在这里顺便提一下 对象展开运算符  ...

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  //可以将 mapState混合这localComputed一起到计算属性
  //提高效率，考虑到计算属性存在着非state取值
  ...mapState({
    // ...
  })
}

 

  接下来解释一下mutation的概念，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

const store = new Vuex.Store({
  state: {
    count: 1
  },
     // 解释一下
    // increment可以传入两个参数 (state,other) state默认就是第一个
    //state即是仓库的值，
    //other是我们传入的值，
    //可以是单个值也可以是对象，根据情况来决定
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

  如何触发一个mutation，我们不能主动触发mutation。必须通过  store.commit('increment', 10)这样的方式来触发。

  同样可以通过mapMutations来简化我们的操作

  需要注意一点mutation里面的操作都是同步的

import { mapMutations } from 'vuex'

export default {
  // ...
  //直接调用下面的方法就可以触发mutation，很简单
   methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 为 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
    })
  }
}

 

  通过mutation不能同步衍生出来Action的概念