如何将json数据通过vuex渲染到页面上

import axios from 'axios'
复制代码

actions: {
    getList(context) {
      axios.get('./list.json').then(({ data }) => {
        context.commit('initList', data)
      })
    }
  },
复制代码

state: {
    // 所有的任务列表
    list: []
  },
  mutations: {
    initList(state, list) {
      state.list = list
    }
  },
复制代码

import { mapState } from 'vuex'
复制代码

created() {
    this.$store.dispatch('getList')
  },
复制代码

computed: {
    ...mapState(['list'])
  }
复制代码

state: {
    // 文本框中的内容
    inputValue: 'aaa'
  },
复制代码

<a-input
      :value="inputValue"
      @change="handleInputChange"
    />
          
computed: {
    ...mapState(['list', 'inputValue'])
  },
复制代码

handleInputChange(e) {
      console.log(e.target.value)
      this.$store.commit('setInputValue', e.target.value)
}


mutations: {
    setInputValue(state, val) {
      state.inputValue = val
    }
  },
复制代码

state: {
    // 下一个Id
    nextId: 5
  },
mutations: {
    addItem(state) {
      const obj = {
        id: state.nextId,
        info: state.inputValue.trim(),
        done: false
      }
      state.list.push(obj)
      state.nextId++
      state.inputValue = ''
    }
  },
复制代码

addItemToList() {
      if (this.inputValue.trim().length <= 0) {
        return this.$message.warning('文本框内容不能为空')
      }

      this.$store.commit('addItem')
    }
复制代码

<a-list-item slot="renderItem" slot-scope="item">
        <a slot="actions" @click="removeItemById(item.id)">删除</a>
</a-list-item>
复制代码

removeItem(state, id) {
      // 根据Id查找对应项的索引
      const i = state.list.findIndex(x => x.id === id)
      // 根据索引，删除对应的元素
      if (i !== -1) {
        state.list.splice(i, 1)
      }
    }
复制代码

<a-checkbox :checked="item.done">{{ item.info }}</a-checkbox>
复制代码

<a-checkbox
          :checked="item.done"
          @change="(e) => {cdstatusChanged(e, item.id)}"
          >{{ item.info }}</a-checkbox>
复制代码

cdstatusChanged(e, id) {
      // 通过e.target.checked可以接受到最新的选中状态
      // console.log(e.target.checked)
      // console.log(id)
      const param = {
        id: id,
        status: e.target.checked
      }

      this.$store.commit('changeStatus', param)
    }
复制代码

// 修改列表项的选中状态
    changeStatus(state, param) {
      const i = state.list.findIndex(x => x.id === param.id)
      if (i !== -1) {
        state.list[i].done = param.status
      }
    }
复制代码

<a @click="clean">清除已完成</a>
// 清除已完成的任务
    clean() {
      this.$store.commit('cleanDone')
    }
复制代码

// 清除已完成的任务
    cleanDone(state) {
      state.list = state.list.filter(x => x.done === false)
    }
复制代码

<a-button @click="changeList('all')" >全部</a-button>
<a-button @click="changeList('undone')" >未完成</a-button>
<a-button @click="changeList('done')" >已完成</a-button>
复制代码

// 修改页面上展示的列表数据
    changeList(key) {
      console.log(key)
      this.$store.commit('changeViewKey', key)
    }
复制代码

state: {
    viewKey: 'all'
  },
  mutations: {
    // 修改视图关键字
    changeViewKey(state, key) {
      state.viewKey = key
    }
  },
复制代码

    ...mapState(['list', 'inputValue', 'viewKey']),
复制代码

<a-button
            :type="viewKey === 'all' ? 'primary' : 'default'"
            @click="changeList('all')"
            >全部</a-button
          >
          <a-button
            :type="viewKey === 'undone' ? 'primary' : 'default'"
            @click="changeList('undone')"
            >未完成</a-button
          >
          <a-button
            :type="viewKey === 'done' ? 'primary' : 'default'"
            @click="changeList('done')"
            >已完成</a-button
          >
复制代码

infolist(state) {
      if (state.viewKey === 'all') {
        return state.list
      }
      if (state.viewKey === 'undone') {
        return state.list.filter(x => !x.done)
      }
      if (state.viewKey === 'done') {
        return state.list.filter(x => x.done)
      }
      return state.list
    }
复制代码

<a-list bordered :dataSource="infolist" class="dt_list">


computed: {
    ...mapState(['inputValue', 'viewKey']),
    ...mapGetters(['unDoneLength', 'infolist'])
  },