vuex使用方法简述

下载vuex

npm install vuex --save

module分模块开发

将整个store分割成模块module，每个模块有自己的state，mutation，getter，action。

1. 新建store目录，在主文件index.js引入vue，vuex。

store目录结构

>store
  >modules
    -app.js
    -user.js
    -tagsView.js
  >getters.js
  >index.js

index.js 主文件创建store对象

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import saleMaintenance from './modules/saleMaintenance'
import getters from './getters'
import tagsView from './modules/tagsView'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        app,
        user,
        tagsView,
        saleMaintenance
    },
    getters
})

export default store

main.js 在跟组件注册store对象

import store from './store'

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

2. state：状态

在vue子组件获取状态state

• 子组件中通过this.$store.state获取state。
• 在vue中展示状态最好是在计算属性computed返回状态。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState辅助函数

• 当一个组件需要多个状态时，可以使用mapState辅助函数生成计算属性。
• 当计算属性名与state节点名相同，可以使用简写方式：字符串数组。

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

对象展开运算符

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

3. getter：从state中派生出来的状态

getter接收2个参数：第一个参数：state ； 第二个：getter。

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
属性获取：this.$store.getters.doneTodosCount

mapGetters 辅助函数

import { mapGetters } from 'vuex'

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

4. mutation：commit 改变store的状态state

提交载荷

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
//提交载荷，载荷payload最好是对象
store.commit('increment', {
  amount: 10
})

5. action：提交的是mutation

当需要commit多次时候，可以参数解构：

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

触发action

store.dispatch('actionA').then(() => {
  // ...
})