Vuex使用

model-manage.js

const state = {
    classificationObject: [],
    activeModel: {}
}

const getters = {
    models: state => {
        const models = []
        state.classificationObject.forEach(classification => {
            (classification['bk_objects'] || []).forEach(model => {
                models.push(model)
            })
        })
        return models
    },
    //返回一个函数
    getModelById: (state, getters) => id => {
        return getters.models.find(model => model['bk_obj_id'] === id)
    },
}

const mutations = {
    setActiveModel(state, model) {
        state.activeModel = model;
    },
    setClassificationObject(state, classificationObject) {
        state.classificationObject = classificationObject;
    }
}

const actions = {
   //返回promise
    findClassificationObject({ commit }) {
        return $api.bkApi.findClassificationObject().then(response => {
            commit('setClassificationObject', response);
            return response;
        });
    }

}

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

main.js:

import modelManage from './modules/views/model-manage.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    modelManage
  }
})

使用state:

 var objectData = this.$store.state.modelManage.classificationObject;
 var activeModel = this.$store.state.modelManage.activeModel;
computed: {
    ...mapState({
      modelId: state => state.modelManage.activeModel.bk_obj_id,
      modelName: state => state.modelManage.activeModel.bk_obj_name
    })
  },
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

使用mutations

 this.$store.commit("modelManage/setActiveModel", model);
 ...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')`
    })

使用getter

 ...mapGetters({
      getModelById: "modelManage/getModelById"
    }),
const model = this.getModelById()(this.$route.params.modelId);
const model = this.$store.getters["modelManage/getModelById"](
       this.$route.params.modelId );
computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }

使用action

 ...mapActions({
      findClassificationObject: "modelManage/findClassificationObject"
    }),
await this.findClassificationObject();
methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

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

组合 Action
(https://vuex.vuejs.org/zh/guide/state.html)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,972评论 0 7
  • vuex中几个核心概念: state, getters, mutations, actions, module g...
    IOneStar阅读 14,061评论 3 13
  • Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,方便数据管理,避免数据重复加载,...
    席坤阅读 518评论 0 0
  • vuex官网 概念,优缺点,就不多说了。vuex直白点说就是封装的一个数据共享的对象注入到vue根部,然后多界面共...
    偏爱墨绿色阅读 613评论 0 1
  • vuex是一个专门为vue构建的状态管理工具,主要是解决多组建状态共享的问题。强调的是集中式管理(组件与组件之间的...
    离陌Study阅读 8,440评论 0 4