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 // 不考虑路径
}