vuex相关

vuex应用的核心就是store（仓库），“store”基本上就是一个容器，它包含着你的应用中大部分的状态。

vuex和单纯的全局对象的不一样点：

1.vuex的状态存储是响应式的，store状态发生变化的时候，其对应的组件也会高效更新；

2.不能直接修改store的状态，修改它惟一的途径就是显示的提交mutation，方便跟踪每一个状态的变化。

 

state

vuex能够经过state获取相应状态，为了方便组件更好的调用能够写到计算属性里

简单写法：

import { mapState } from 'vuex'

computed: {

  ...mapState(['age'])

}

 

getter

用于从store中派生出一些状态，getter的返回值会根据它的依赖被缓存起来，只有当它的依赖值发生改变才会被从新计算

使用方法相似state：

this.$store.getters.isAdult

简单写法：

import { mapGetters } from 'vuex'

computed: {

  ...mapGetters(['isAdult'])

}

 

mutation

它是更改vuex的store中的状态的惟一方法。它相似于事件，每一个mutation都有一个字符串的事件类型和一个回调函数。

回调函数第一个参数是state，第二个参数是载荷（payload），载荷通常是个对象

必须是同步函数

其实直接赋值也能够修改状态，在vuex实例新增属性strict：true属性能够禁止直接修改，可是只能用于开发环境。

简单写法：

import { mapMutations } from 'vuex'

methods: {

  ...mapMutations(['updateAge'])

}

mounted: function () {

  this.updateAge(26)

}

 

action

相似于mutation，不一样在于：

action提交的是mutation，而不是直接更改状态

action能够包含任意异步操做

简单写法：

import { mapActions } from 'vuex'

methods: {

  ...mapActions(['updateAgeAsync'])

}

mounted: function () {

  this.updateAgeAsync({

    age: 12,

    time: 2000

  })

}

 

模块

state

使用方法