Vuex的运用

最新推荐文章于 2024-09-22 18:59:52 发布

原创最新推荐文章于 2024-09-22 18:59:52 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Element-UI组件中使用Vuex管理状态，实现实时勾选列表项并动态更新已完成和未完成项的数量。通过Vuex的state、mutations和getter实现数据过滤和视图切换功能。

Vuex在element-ui中的运用

简单实现效果如下
在这里插入图片描述

勾选的是已完成的数据，去掉勾选则放到未完成处，展示个动态总数
代码如下：
以下为index.js中的代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  //原始数据list，也可以在mutations中获取获取后端数据
    list: [{
        id: '0',
        name: '王2',
        state: 'true'
      },
      {
        id: '1',
        name: '王3',
        state: 'true'
      },
      {
        id: '2',
        name: '王6',
        state: 'false'
      },
      {
        id: '3',
        name: '王4',
        state: 'false'
      },
      {
        id: '4',
        name: '王7',
        state: 'false'
      },
      {
        id: '5',
        name: '王8',
        state: 'false'
      },
      {
        id: '6',
        name: '王9',
        state: 'false'
      }
    ],
    //默认选择的是全部状态
    key: 'all'
  },
  mutations: {
    add(state, value) {
      state.list.push(value)
    },
    del(state, value) {
      const t = state.list.findIndex(x => x.id === value)
      if (t !== -1) {
        state.list.splice(t, 1)
      }
    },
    //点击前面的复选框，有勾代表完成，没勾代表未完成
    change(state, event) {
    //在list中查找id=传过来参数的id
      const t = state.list.findIndex(x => x.id === event.id)
      if (t !== -1) {
        if (event.state === 'true') {
          state.list[t].state = 'false'
        } else {
          state.list[t].state = 'true'
        }
      }
    },
    //不能直接修改state，要通过mutations修改
    changeView(state, value) {
      state.key = value
    }
  },
  actions: {},
  getters: {
  //根据选择展示不同内容
    getListIn(state) {
      if (state.key === 'all') {
        return state.list
      } else if (state.key === 'yes') {
      //返回list中的state=true的数据,跟state好像重名了，知道什么意思就行，不改了
        return state.list.filter(x => x.state === 'true')
      } else if (state.key === 'no') {
      //返回list中的state=false的数据,跟state好像重名了，知道什么意思就行，不改了
        return state.list.filter(x => x.state === 'false')
      }
    }
  },
  modules: {}
})

调用页面代码如下：

<template>
  <div>
    <div style="height：300px;width:800px;margin:0 auto;">
      <div>
        请输入内容：<el-input
          type="text"
          placeholder="请输入内容"
          v-model="value"
          style="width: 75%; margin-top: 20px"
        >
        </el-input>
        <el-button
          type="primary"
          round
          style="float: right; margin-top: 20px"
          @click="add"
          >增加</el-button
        >
      </div>
      <div style="width: 100%; margin-top: 20px; border: 1px solid #000">
        <el-table
          ref="multipleTable"
          :data="getListIn"
          tooltip-effect="dark"
          style="width: 100%"
          @select="changeState"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="name" label="数据" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click="del(scope.row)"> 移除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <h4>总数为{{ list.length }}</h4>
        <div style="margin-top: 20px; text-align: center">
          <el-button-group>
            <el-button
              :type="key === 'all' ? 'primary' : 'default'"
              @click="changeView('all')"
              >全部</el-button
            >
            <el-button
              :type="key === 'yes' ? 'primary' : 'default'"
              @click="changeView('yes')"
              >完成</el-button
            >
            <el-button
              :type="key === 'no' ? 'primary' : 'default'"
              @click="changeView('no')"
              >未完成</el-button
            >
          </el-button-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  data() {
    return {
      id: '7',
      value: '121',
      multipleSelection: []
    }
  },
  mounted() {
    for (const i in this.getListIn) {
      if (this.getListIn[i].state === 'true') {
        this.$refs.multipleTable.toggleRowSelection(this.getListIn[i], true)
      }
    }
  },
  computed: {
    ...mapState(['list', 'key']),
    ...mapGetters(['getListIn'])
  },
  methods: {
    ...mapMutations(['add', 'del', 'changeView']),
    add() {
      const ct = {
        id: this.id++,
        name: this.value,
        state: 'false'
      }
      this.$store.commit('add', ct)
    },
    del(row) {
      const i = row.id
      this.$store.commit('del', i)
    },
    changeState(selection, row) {
      this.$store.commit('change', row)
    },
    changeView(key) {
      this.$store.commit('changeView', key)
    }
  },
  watch: {
  //监听getListIn数据变化，进行重新勾选
    getListIn: {
      handler(newVal) {
        for (const i in newVal) {
          if (newVal[i].state === 'true') {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(
                this.getListIn[i],
                true
              )
            })
            //这种方式勾选渲染无效，得用this.$nextTick
            //this.$refs.multipleTable.toggleRowSelection(this.getListIn[i], true)
            
          }
        }
      },
      deep: true
    }
  }
}
</script>