vuex理解

2018-04-27

最好提前在你的store中初始化好所有所需属性。

在src同级目录下新建一个store文件夹
在下面分别建立

|--src
    |-store
    |    |--index.js
    |    |--state.js
    |    |--mutations.js
    |    |--getters.js
    |    |--actions.js

index.js中，引入其他文件并导出

import Vue from 'vue'
import Vuex, { Store } from 'vuex'

import state from './state'
import * as getters from './getters'
import * as actions from './actions'
import * as mutations from'./mutations'

Vue.use(Vuex)

const store = new Store({
  state,
  getters,
  actions,
  mutations,
  strict: process.env.NODE_ENV !== 'production'
})

if (module.hot) {
  module.hot.accept([
    './getters',
    './actions',
    './mutations'
  ], async () => {
    store.hotUpdate({
      getters: await import('./getters'),
      actions: await import('./actions'),
      mutations: await import('./mutations')
    })
  })
}

export default store

mapState 辅助函数

这样就可以在页面中直接使用 this.count获取state 中 count的值

import { mapState } from 'vuex'

computed:{
     mapState([
      // 映射 this.count 为 store.state.count
      'count'
    ])   
}

mapMutation的使用

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

mapGetter辅助函数

import { mapGetters } from 'vuex'

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

// 使用对象格式可以为getters中的方法起别名
mapGetters({
  // 映射 `this.doneCount` 为 `store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})