vuex demo示例

一. demo示例解释说明

vuex里面的四大金刚：State， Mutations，Actions，Getters

1. 做一个demo页面 可直接在App.vue操作

  <!-- 做一个demo页面 可直接在App.vue操作 -->
<template>
  <div id="app">
    <el-form>
      <el-form-item>
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="18">
            <el-input placeholder="添加事件" :value="inputVal" @input="handleInputChange"></el-input>
          </el-col>
          <el-col :span="5">
            <el-button type="primary" @click="onSubmit">添加事件</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-card>
      <el-row type="flex" justify="space-between" v-for="item in getInfoList" :key="item.id">
        <el-col :span="17">
          <el-checkbox :checked="item.done" @change="handleChangeDone($event,item.id)">{{item.info}}</el-checkbox>
        </el-col>
        <el-col :span="2">
          <el-button type="text" @click="handleDelete (item.id)">删除</el-button>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between" align="middle">
        <el-button type="text">{{getListLen}}条剩余</el-button>
        <el-button-group>
          <el-button size="mini" plain :type="flag=='all' ? 'primary':''" @click="changeFlag('all')">全部</el-button>
          <el-button size="mini" plain :type="flag=='success' ? 'primary':''" @click="changeFlag('notsuccess')">未完成</el-button>
          <el-button size="mini" plain :type="flag=='notsuccess' ? 'primary':''" @click="changeFlag('success')">已完成</el-button>
        </el-button-group>
        <el-button type="text" @click="resetList">清除已完成</el-button>
      </el-row>
    </el-card>
  </div>
</template>

//script	
import { mapState, mapGetters } from 'vuex'
export default {
  data () {
    return {

    }
  },
  computed: {
    ...mapState(['flag']),
    ...mapGetters(['getInfoList', 'getListLen', 'inputVal'])
  },
  created () {
    this.$store.dispatch('app/getList')
  },
  methods: {
    // 添加事件按钮
    onSubmit () {
      this.$store.commit('app/addList')
    },
    // 修改输入框的值
    handleInputChange (e) {
      this.$store.commit('app/setInput', e)
    },
    // 选择复选框,修改item中的done值
    handleChangeDone (e, id) {
      const obj = {
        done: e,
        id: id
      }
      this.$store.commit('app/changeDone', obj)
    },
    // 删除item
    handleDelete (id) {
      this.$store.commit('app/deleteList', id)
    },
    // 全部  未完成  已完成按钮
    changeFlag (flag) {
      console.log('===' + flag)
      this.$store.commit('app/ChangeFlag', flag)
    },
    // 清除已完成
    resetList () {
      this.$store.commit('app/ChangeFlag', 'notsuccess')
    }
  }
}

#app {
  width: 500px;
}

2.src-> store -> index.js

//src-> store -> index.js
import Vue from 'vue'
import Vuex from 'vuex'
import app from '../store/modules/app'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    setting
  },
  getters
})

3.src->store=>modules=>app.js

//store=>modules=>app.js
import axios from 'axios'
const state = {
  list: [],
  inputVal: '自定义文字',
  flag: 'all'
}

const mutations = {
  // 初始化list数据
  initList(state, data) {
    state.list = data
  },
  // 设置实时修改输入框的值
  setInput(state, val) {
    console.log('输入框====' + val)
    state.inputVal = val
  },
  // 添加事件列表
  addList(state) {
    const obj = {
      id: state.list.length,
      info: state.inputVal.trim(),
      done: false
    }
    state.list.push(obj)
  },
  // 修改复选框中的done的值
  changeDone(state, obj) {
    // 1.根据id查找对应项的索引
    const index = state.list.findIndex(x => x.id == obj.id)
    // 2.根据索引，删除对应的元素
    // state.list[index].done = obj.done
    if (index != -1) {
      // state.list.splice(index, 1)
      state.list[index].done = obj.done
    }
    console.log('修改复选框中的done的值' + JSON.stringify(state.list))
  },
  // 删除item
  deleteList(state, id) {
    console.log('删除item')
    state.list = state.list.filter(item => item.id != id)
  },
  // 获取对应的数据
  ChangeFlag(state, flag) {
    state.flag = flag
  }
}

const actions = {
  // 异步请求模拟数据中的list数据
  getList(context) {
    axios.get('./list.json').then(({ data }) => {
      context.commit('initList', data)
    })
  }
}

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

4.src->store=>getters.js

//store=>getters.js
const getters = {
  // 统计全部  未完成  已完成数据
  list: state => state.app.list,
  inputVal: state => state.app.inputVal,
  flag: state => state.app.flag,
  getInfoList(state) {
    if (state.app.flag == 'success') {
      return state.app.list.filter(item => item.done)
    }
    if (state.app.flag == 'notsuccess') {
      return state.app.list.filter(item => !item.done)
    }
    return state.app.list
  },
  // 计算未完成的条数
  getListLen(state) {
    console.log(
      'getListLen===' + state.app.list.filter(item => !item.done).length
    )
    return state.app.list.filter(item => !item.done).length
  }
}

export default getters

5.public=>list.json

//public=>list.json
[
  {
    "id": 0,
    "info": "Racing car sprays burning fuel into crowd.",
    "done": true
  },
  {
    "id": 1,
    "info": "Japanese princess to wed commoner.",
    "done": false
  },
  {
    "id": 2,
    "info": "Australian walks 100km after outback crash.",
    "done": true
  },
  {
    "id": 3,
    "info": "Man charged over missing wedding girl.",
    "done": false
  },
  {
    "id": 4,
    "info": "Los Angeles battles huge wildfires.",
    "done": false
  }
]