Vue中store用法

1. 声明一个store的index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import sectionTemple from './modules/sectionTemple.js';
import docTemple from './modules/docTemple.js';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    sectionTemple,
    docTemple,
  },
});

export default store;

每一个模块配置一个js，全部引入到store下的js中，模块中的全局方法js放入modules下。

以docTemple.js为例：

const docTempleModule = {
  namespaced: true,
  state: {
    // 当前选中的模板ID
    temId: null,
    // 当前选中的模板版本ID
    temVersionId: null,
    // 当前选中的段落ID
    sectionId: null,
  },
  mutations: {
    setTemId(state, payload) {
      state.temId = payload;
    },
    setTemVersionId(state, payload) {
      state.temVersionId = payload;
    },
    setSectionId(state, payload) {
      state.sectionId = payload;
    },
  },
};

export default docTempleModule;

state中设置状态属性

mutations中set方法

2. 组件中引入

2.1 给全局变量设值

import { mapMutations } from 'vuex';


methods: {
    ...mapMutations('docTemple', [
      'setTemId',
      'setTemVersionId',
      'setClickTarget',
      'setDocInfo',
      'setShowMakingCom',
      'setElements',
      'setCurrentSectionList',
    ]),
    nodeClick(){
      this.setTemVersionId(data.temVersionId);
    }
}

2.2 从全局变量中取值

import { mapState } from 'vuex';

computed: {
    ...mapState('docTemple', ['temVersionId', 'docInfo', 'currentSelectEleInfo', 'temId']),
},

methods:{
  queryLis(){
    console.log('id:', this.temId);
  }
}