基础使用

基本使用

// 创建组件
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

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

模块化使用

const moduleA = {
  namespaced: true,
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  namespaced: true,
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

...mapActions('moduleA', ['actions1', 'actions2']),
...mapActions('moduleB', ['actions1', 'actions2']),
...mapActions(['moduleB/actions1', 'moduleB/actions2']),

或者使用createNamespacedHelpers直接引入

import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('moduleA')
const { mapState, mapActions } = createNamespacedHelpers('moduleB')

辅助函数

import { mapGetters, mapActions, mapState } from 'vuex';

export default {
  computed: {
    ...mapGetters(['userinfo']),
    ...mapGetters('factory', ['factoryinfo', 'allFactroyInfo']),
    ...mapGetters('product', ['s_id', 'serie_list_reverse']),
    ...mapState('product', ['serie_list', 'hostname', 'serie_product_list']),
  },
  methods: {
    ...mapActions('factory', ['get', 'getAllFactorys']),
    ...mapActions('product', ['getAllSeries', 'getProducts']),
  }
}