vue+vuex+vuerouter+element+axios请求本地json文件实现的增删改查

好的，这是一个比较复杂的问题，我将尽可能详细地回答你。

首先，你需要在 Vue 项目中安装 Vuex、Vue Router、Element UI 和 Axios 这些库。可以通过以下命令来安装它们：

npm install vuex vue-router element-ui axios --save

接下来，你需要创建一个 Vuex 的 store 来存储应用程序的状态。在 store 中，你可以定义一些 mutation、action 和 getter 来改变状态。

在这个示例中，我们需要定义一个 state 来存储我们的数据，例如：

const state = {
  items: [],
  currentItem: {}
}

然后，我们需要定义一些 mutation 来改变 state 中的数据。例如：

const mutations = {
  setItems(state, items) {
    state.items = items
  },
  setCurrentItem(state, item) {
    state.currentItem = item
  }
}

接下来，我们需要定义一些 action 来处理异步请求。例如：

const actions = {
  fetchItems({ commit }) {
    axios.get('/api/items.json').then(response => {
      commit('setItems', response.data)
    })
  },
  addItem({ commit, state }, item) {
    axios.post('/api/items.json', item).then(response => {
      commit('setItems', [...state.items, response.data])
    })
  },
  updateItem({ commit, state }, item) {
    axios.put('/api/items/' + item.id + '.json', item).then(response => {
      const index = state.items.findIndex(i => i.id === response.data.id)
      const items = [...state.items]
      items[index] = response.data
      commit('setItems', items)
      commit('setCurrentItem', {})
    })
  },
  deleteItem({ commit, state }, id) {
    axios.delete('/api/items/' + id + '.json').then(response => {
      const items = state.items.filter(i => i.id !== id)
      commit('setItems', items)
    })
  }
}

这些 action 将发送请求到我们的 API 并更新 store 中的数据。例如：

- `fetchItems` 将获取所有数据并将其设置到 `items` 中。
- `addItem` 将添加一个新的数据项并将其添加到 `items` 中。
- `updateItem` 将更新一个数据项并将其更新到 `items` 中。
- `deleteItem` 将删除一个数据项并将其从 `items` 中删除。

最后，我们需要定义一些 getter 来获取我们的数据。例如：

const getters = {
  allItems: state => state.items,
  currentItem: state => state.currentItem
}

现在，我们已经完成了 store 的设置。接下来，我们需要创建一个 Vue 组件来渲染我们的数据，例如：

<template>
  <div>
    <el-table :data="items" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
      <el-table-column>
        <template slot-scope="{ row }">
          <el-button @click="editItem(row)">Edit</el-button>
          <el-button @click="deleteItem(row.id)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible">
      <el-form :model="currentItem" label-position="left" ref="form">
        <el-form-item label="Name">
          <el-input v-model="currentItem.name"></el-input>
        </el-form-item>
        <el-form-item label="Age">
          <el-input-number v-model="currentItem.age"></el-input-number>
        </el-form-item>
        <el-form-item label="Address">
          <el-input v-model="currentItem.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="submitForm">Save</el-button>
      </div>
    </el-dialog>
    <el-button @click="addItem()">Add Item</el-button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['items', 'currentItem'])
  },
  methods: {
    ...mapActions(['fetchItems', 'addItem', 'updateItem', 'deleteItem']),
    editItem(item) {
      this.$store.commit('setCurrentItem', item)
      this.dialogVisible = true
    },
    deleteItem(id) {
      this.deleteItem(id)
    },
    submitForm() {
      const form = this.$refs.form
      form.validate(valid => {
        if (valid) {
          if (this.currentItem.id) {
            this.updateItem(this.currentItem)
          } else {
            this.addItem(this.currentItem)
          }
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

在这个组件中，我们使用 Element UI 的表格和表单来渲染我们的数据。我们还使用了 Vuex 的 mapState、mapActions 来将 store 中的状态和操作映射到组件的计算属性和方法中。

现在，我们已经完成了一个基于 Vue、Vuex、Vue Router、Element UI 和 Axios 的增删改查应用程序。当然，这个示例并不是完美的，你可能需要根据你的具体需求做一些适当的调整。