vue 监控vuex中state getters store

只能是一个参数

 

一、

添加:selectCityId 

1、store 中

const state = {
    politicsTwoNav: '台北市',
    selectCityId:'0'

}

const mutations = {
    POLITICS_TWO_NAV: (state, politicsTwoNav) => {
        state.politicsTwoNav = politicsTwoNav
    },
    SELECT_CITY: (state, selectCityId) => {
        console.log(selectCityId,")00000")
        state.selectCityId = selectCityId
    },
}

const actions = {
    // get user info
    getInfo({ commit, state }) {
        return new Promise((resolve, reject) => {
            getInfo(state.token).then(response => {
                const { data } = response

                if (!data) {
                    reject('Verification failed, please Login again.')
                }

                const { roles, name, avatar, introduction } = data

                // roles must be a non-empty array
                if (!roles || roles.length <= 0) {
                    reject('getInfo: roles must be a non-null array!')
                }

                // commit('SET_ROLES', roles)
                // commit('SET_NAME', name)
                // commit('SET_AVATAR', avatar)
                // commit('SET_INTRODUCTION', introduction)
                resolve(data)
            }).catch(error => {
                reject(error)
            })
        })
    }
}

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

2、getters.js 中

const getters = {
  politicsTwoNav: state => state.politics.politicsTwoNav,
  selectCityId: state => state.politics.selectCityId,
}
export default getters

3、页面可以直接监控 

watch: {
    "$store.state.politics.selectCityId"(newV) {
      this.getData(newV);
    },
  },

4、存

import store from "../store";

store.commit("politics/SELECT_CITY", type);

二、

1、页面引用不需要存数据到vuex中

<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="Activity" name="activity">
                <activity />
              </el-tab-pane>
              <el-tab-pane label="Timeline" name="timeline">
                <timeline />
              </el-tab-pane>
              <el-tab-pane label="Account" name="account">
                <account :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import Account from './components/Account'

export default {
  name: 'Profile',
  components: { UserCard, Activity, Timeline, Account },
  data() {
    return {
      user: {},
      activeTab: 'activity'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
        email: 'admin@test.com',
        avatar: this.avatar
      }
    }
  }
}
</script>

 2、页面需要存数据到vuex中

 

<template>
  <div class="formBox">
    <p class="pTitle">选择列表信息</p>
    <el-table
      ref="multipleTable"
      highlight-current-row
      :data="schemeSelectList"
      style="width: 100%"
      fit
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="index" label="序号" width="50" fixed>
        <template slot-scope="scope">
          <span>({{ scope.row.index }}) </span>
        </template>
      </el-table-column>
      <el-table-column label="内容名称" prop="contentName" fixed />
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import store from "@/store";

export default {
  name: "Form",
  props: {
    value: {
      type: Number,
      default: 9,
    },
  },
  data() {
    return {
      description: "运作方案管理",
      loading: true,
      multipleSelection: [],
    };
  },
  computed: {
    ...mapGetters(["schemeSelectList"]),
  },

  created() {},
  mounted() {
    for (let i = 0; i < this.schemeSelectList.length; i++) {
      if (i < 9) {
        this.$refs.multipleTable.toggleRowSelection(this.schemeSelectList[i]);
      }
    }
  },
  methods: {
    selectable(row, index) {
      if (index < 9) {
        return false;
      } else {
        return true;
      }
    },
    //  列表选择操作
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    /** 提交表单 */
    submitForm() {
      store.commit("runScheme/SET_MULTIPLE_SELECTION", this.multipleSelection);
      if (this.value === 9) {
        this.$emit("handleOpen", 1);
      }
      if (this.value === 14) {
        this.$emit("handleOpen", 13);
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>