Vue2 中 store 基本用法-应用实例——store之store配置步骤 & vuex之mutations用法 & vuex之getters用法

1、store配置步骤

首先：在main.js中引入

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

第一步：在src下新建store文件夹，其中新建index.js

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import map from './modules/map';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    map
  }
})

第二步：在store文件夹里，新建modules文件夹，其中新建map.js

src/store/modules/map.js

/*
 * @Descripttion:
 * @version:
 * @Author:
 * @Date: 2022-03-06 11:23:28
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-03-14 13:50:38
 */
const state = {
  isShow: false, // 默认不显示
  tableList: [], // 表格数据
  infoData: null, // 表格当前行数据
  cityCode: '110099', //城市的行政编码
  resourceTab: "fileM",//当前选中的tab资源管理
  kindCode: '', // 种别代码
  foodOptions: '', // 风味列表
};

// getters计算属性
const getters = {
    getDemoValue: state => state.cityCode
};

// actions异步请求处理
const actions = {};

// mutations主要用来操作state
const mutations = {
  setIsShow (state, isShow) { // 布尔值 true
    state.isShow = isShow;
  },
  CHANGE_KINDCODE (state, kindCode) { // 字符串 ''
    state.kindCode = kindCode;
  },
  setSelectedData (state, data) { // 数组 []
    state.tableList = data;
  },
  setInfoData (state, infoData) { // null
    state.infoData = infoData;
  },
  setCityCode (state, cityCode) {  // 固定值
    state.cityCode = cityCode
  }
};

export default {
  state,
  getters,
  actions,
  mutations
}

第三步：在index.vue文件夹里进行引入调用

<template>
    <el-table :data="$store.state.map.tableList">
		<el-table-column fixed="right" label="新增数据量" width="75">
			<template slot-scope="scope">
				<i @click="showInfo(scope.row)" style="color: #636EF5">{{scope.row.mergeCount}}</i>
			</template>
		</el-table-column>
    </el-table>

    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="资料管理" name="fileM">
           <div>内容1</div>
        </el-tab-pane>
        <el-tab-pane label="作业列表" name="cutM">
           <div>内容2</div>
        </el-tab-pane>
        <el-tab-pane label="质检列表" name="qaM">
           <div>内容3</div>
        </el-tab-pane>
    </el-tabs>

    <el-select v-model="value1" :disabled="isDisabled"  @change="changeSelect"  multiple placeholder="请选择">
        <el-option
                   v-for="item in $store.state.map.foodOptions"
                   :key="item.ID"
                   :label="item.FOODTYPENAME"
                   :value="item.ID">
        </el-option>
    </el-select>


</template>
<script>
import store from '@/store/index';
export default {
  name: "demo",
  data() {
    return {
      show:false,
      num:1,
      cityCode:"", //行政区划
      activeName: "fileM", //默认显示资料管理
      res:[
        {
           "ID": 1,
           "FOODTYPENAME": '风味类型11',
           "FOODTYPE": "中餐馆1",
           "TYPE": "C"
        }, 
      ],
      isDisabled:false,
      value1:'',
      dataList:[],
      codeValue:'110101-中餐风味'
    };
  },
  watch:{
    deep: true,
    show(newVal) {
      if(newVal == false){
          console.log("新值",newVal)
      }
    },     
  },
    mounted() {
       this.store.state.map.foodOptions = this.res // 接口数据
    },
  methods:{
    /**
     * 点击事件
     * @return {*}
     */
      click () {
          if (this.$store.state.map.isShow) {//isPartitionLayerShow
              this.num = 2;
              this.cityCode = store.state.map.cityCode; // 绝对路径
              //等价于
              this.cityCode = this.$store.getters.getDemoValue // 不考虑路径
              store.commit('setIsShow', true);  // 引入store时
          } 
      },
	/**
	* 跳转到导入详情界面
	* @param row 详情数据
	*/
	showInfo(row) {
		this.$store.state.map.infoData = row;
        this.$store.commit('setCityCode',row.cityCode)
        this.$store.commit('CHANGE_KINDCODE', row.kindCode); // 未引入store时
        // 第一种情况
        this.$store.commit('setInfoData', null);  // 未引入store时
        // 第二种情况
        tool = row.createTool({
          vThis: this,
          layerName: '名字'
        });

        this.$store.commit('setInfoData', tool); 
	}, 
    /**
     * 点击tab切换
     */
    handleClick(tab, event) {
      this.$store.state.map.resourceTab = tab.name;
      if (tab.label == "资料管理") {
        console.log("名字切换")
      }
    }, 
     /**
     * 用户分享 单选
     *  @param {array} v 选择项
     */
    changeSelect (v) {  
        store.commit('setSelectedData', this.dataList);
        this.checked = store.state.map.foodOptions.map(item => item.clientId).every(val => v.includes(val))
        store.state.map.kindCode =  this.codeValue.substring(0,6);
    }
  },
  components: {},
};
</script>

注：

html中调用时：$store.state.map.foodOptions

js中调用时：store.state.map.foodOptions

2、mutations用法

第一步：在store文件夹里的index.js中进行配置

const state = {
  cityCode: '110099', //城市的行政编码
  isShow: false, // 默认不显示
  tableList: [], // 表格数据
};
// mutations主要用来操作state
const mutations = {
  setCityCode (state, cityCode) {  // 固定值
    state.cityCode = cityCode
  }
};
export default {
  state,
  mutations
}

第二步：在js文件或vue文件中的js模块里进行设置

// 第一种  未引入store
if(true){
    this.$store.commit('setCityCode',data.cityCode)
}

// 第二种  引入store
import store from '@/store/index';
if(true){
    store.commit('setCityCode', '110099');
}

第三步：html模块或js模块中进行使用

<template>
	<div v-if="$store.state.map.isShow"></div>
<el-table ref="multipleTable" :data="$store.state.map.tableList"></el-table>
</template>
<script>
click() {
    this.cityCode = store.state.map.cityCode;
}
</script>

3、getters用法

第一步：在store文件夹里的index.js中进行配置

const state = {
  cityCode: '110099', //城市的行政编码
};
// getters计算属性
const getters = {
  getDemoValue: state => state.cityCode
};
export default {
  state,
  getters
}

第二步：在js文件或vue文件中的js模块里进行设置

// 第一种  未引入store
if(true){
    this.cityCode = this.$store.state.map.cityCode; // 绝对路径
    // 等价于
    this.cityCode = this.$store.getters.getDemoValue // 不考虑路径
}