vuex de l'entrée au combat réel TodoList multifonction

1. Le concept de couverture de base de vuex

Vuex est un mode de gestion d'état développé spécifiquement pour les applications Vue.js. Il utilise le stockage centralisé pour gérer l'état de tous les composants de l'application et utilise les règles correspondantes pour garantir que l'état change de manière prévisible. Il peut facilement réaliser le partage de données entre les composants

1.1 état

State fournit la seule ressource de données et toutes les données partagées doivent être stockées dans l'état dans le magasin.

• La première façon d'accéder à l'état dans les composants:

this.$store.state.全局数据名称

• La deuxième façon d'accéder à l'état dans les composants:

1. Importez la fonction mapState depuis vuex si nécessaire. Grâce à la fonction mapState qui
import {mapState} from 'vuex'
vient d'être importée, mappez les données globales requises par le composant actuel aux propriétés calculées du composant actuel
2. Mappez les données globales aux propriétés calculées du composant actuel
computed :{ ...mapState(['count']) }

1.2 mutation

Les mutations sont utilisées pour modifier les données dans le magasin
① Les données du magasin ne peuvent être modifiées que par mutation et les données du magasin ne peuvent pas être directement manipulées.
②Bien que l'opération soit un peu lourde de cette manière, elle peut surveiller de manière centralisée les modifications de toutes les données.

1. this.$store.commit()Est le premier moyen de déclencher des mutations,

//store.js中定义mutations
const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
   add(state) {
    
    
   //更改状态
    state.count++
   }
  }
})
//组件中接收触犯mutations
methods: {
    
    
    add() {
    
    
      this.$store.commit('add')
    },

  },



//mutations可以传递参数
 mutations: {
    
    
   add2(state,step) {
    
    
    state.count += step
   }
  }
//触发带参数的mutation
methods: {
    
    
    add() {
    
    
      this.$store.commit('add',3)
    },

  },

2. La deuxième façon de déclencher des mutations: via le mappage de fonctions

1. Importez la fonction mapState depuis vuex si nécessaire. Grâce à la fonction mapState qui
import {mapMutations} from 'vuex'
vient d'être importée, mappez les données globales requises par le composant actuel aux propriétés de calcul calculées du composant actuel.
2. Mappez la fonction de mutations spécifiée à la fonction de méthodes du composant actuel
methods:{ ...mapMutations(['add']) }

1.3 action

用于处理异步任务
Si vous modifiez des données via des opérations asynchrones, vous devez utiliser Action au lieu de Mutation, mais vous devez toujours
modifier indirectement les données en déclenchant Mutation en action .

1. this.$store.dispatchEst le premier moyen de déclencher des actions

//定义store.js 中定义action
  actions: {
    
    
    addAsync(context) {
    
    
      setTimeout(()=> {
    
    
        context.commit('add')
      },1000)
    }
  }


//在事件方法中通过dispatch触发action
add () {
    
    
    //  触发action
    this.$store.dispatch('addAsync')
  }

Déclencher une tâche asynchrone avec des paramètres

  mutations: {
    
    
   add(state,step) {
    
    
    state.count += step
   }
  },
  actions: {
    
    
    addAsync(context,step) {
    
    
      setTimeout(()=> {
    
    
        context.commit('add',step)
      },1000)
    }
  }
//触发action
add () {
    
    
    this.$store.dispatch('addAsync',5)
  }

2. La deuxième façon de déclencher des actions: par le biais du mappage de fonctions

1. Importez la fonction mapState depuis vuex si nécessaire. Grâce à la fonction mapState qui
import {maptActions} from 'vuex'
vient d'être importée, mappez les données globales requises par le composant actuel aux propriétés de calcul calculées du composant actuel.
2. Mappez la fonction de mutations spécifiée à la fonction de méthodes du composant actuel
methods:{ ...maptActions(['addAsync']) }

1.4 getter

Getter traite les données du Store pour former de nouvelles données. Il ne modifiera pas les données d'origine dans l'état, mais il joue le rôle de conditionnement des données.
① Getter peut former de nouvelles données après avoir traité les données existantes dans le Store, similaires aux propriétés calculées de Vue.
② Si les données du Store changent, les données de Getter changeront également.

1. this.$store.getters.名字Oui, la première façon d'appeler les getters

//组件中调用
 {
    
    {
    
    $store.getters.showNum}}
 //store.js中定义
   getters: {
    
    
    showNum (state){
    
    
      return `当前最新的数据${
      
      state.count}`
    }
  }

2. Au moyen de la cartographie des fonctions

1. Importez la fonction mapState depuis vuex si nécessaire. Grâce à la fonction mapState qui
import {maptGetters} from 'vuex'
vient d'être importée, mappez les données globales requises par le composant actuel aux propriétés de calcul calculées du composant actuel.
2. Mappez la fonction de mutations spécifiée à la fonction de méthodes du composant actuel
computed :{ ...maptGetters(['showNum']) }

2. Utilisez vue pour implémenter la fonction todoList

Préparation au développement

• bibliothèque de composants antd-vue
• vuex

analyse de la demande

• Ajouter une fonction d'événement
• Marquer la fonction d'événement
• Supprimer la fonction d'événement

Partage de Code

Code composant VuexTodoList.vue

//组件代码 VuexTodoList.vue
<template>
  <div id="app">
    <a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handleInputChange" />
    <a-button type="primary" @click="addItemToList">添加事项</a-button>

    <a-list bordered :dataSource="infolist" class="dt_list">
      <a-list-item slot="renderItem" slot-scope="item">
        <!-- 复选框 -->
        <a-checkbox :checked="item.done" @change="(e) => {cbStatusChanged(e, item.id)}">{
    
    {
    
    item.info}}</a-checkbox>
        <!-- 删除链接 -->
        <a slot="actions" @click="removeItemById(item.id)">删除</a>
      </a-list-item>

      <!-- footer区域 -->
      <div slot="footer" class="footer">
        <!-- 未完成的任务个数 -->
        <span>{
    
    {
    
    unDoneLength}}条剩余</span>
        <!-- 操作按钮 -->
        <a-button-group>
          <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>
        </a-button-group>
        <!-- 把已经完成的任务清空 -->
        <a @click="clean">清除已完成</a>
      </div>
    </a-list>
  </div>
</template>

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

export default {
    
    
  name: 'app',
  data() {
    
    
    return {
    
    }
  },
  created() {
    
    
    this.$store.dispatch('getList')
  },
  computed: {
    
    
    ...mapState(['inputValue', 'viewKey']),
    ...mapGetters(['unDoneLength', 'infolist'])
  },
  methods: {
    
    
    // 监听文本框内容变化
    handleInputChange(e) {
    
    
      this.$store.commit('setInputValue', e.target.value)
    },
    // 向列表中新增 item 项
    addItemToList() {
    
    
      if (this.inputValue.trim().length <= 0) {
    
    
        return this.$message.warning('文本框内容不能为空！')
      }

      this.$store.commit('addItem')
    },
    // 很据Id删除对应的任务事项
    removeItemById(id) {
    
    
      // console.log(id)
      this.$store.commit('removeItem', id)
    },
    // 监听复选框选中状态变化的事件
    cbStatusChanged(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)
    },
    // 清除已完成的任务
    clean() {
    
    
      this.$store.commit('cleanDone')
    },
    // 修改页面上展示的列表数据
    changeList(key) {
    
    
      // console.log(key)
      this.$store.commit('changeViewKey', key)
    }
  }
}
</script>

<style scoped>
#app {
    
    
  padding: 10px;
}

.my_ipt {
    
    
  width: 500px;
  margin-right: 10px;
}

.dt_list {
    
    
  width: 500px;
  margin-top: 10px;
}

.footer {
    
    
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

Code de gestion de l'étatstore.js

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

Vue.use(Vuex)

export default new Vuex.Store({
    
    
  state: {
    
    
    // 所有的任务列表
    list: [],
    // 文本框的内容
    inputValue: 'aaa',
    // 下一个Id
    nextId: 5,
    viewKey: 'all'
  },
  mutations: {
    
    
    initList(state, list) {
    
    
      state.list = list
    },
    // 为 store 中的 inputValue 赋值
    setInputValue(state, val) {
    
    
      state.inputValue = val
    },
    // 添加列表项
    addItem(state) {
    
    
      const obj = {
    
    
        id: state.nextId,
        info: state.inputValue.trim(),
        done: false
      }
      state.list.push(obj)
      state.nextId++
      state.inputValue = ''
    },
    // 根据Id删除对应的任务事项
    removeItem(state, id) {
    
    
      // 根据Id查找对应项的索引
      const i = state.list.findIndex(x => x.id === id)
      // 根据索引，删除对应的元素
      if (i !== -1) {
    
    
        state.list.splice(i, 1)
      }
    },
    // 修改列表项的选中状态
    changeStatus(state, param) {
    
    
      const i = state.list.findIndex(x => x.id === param.id)
      if (i !== -1) {
    
    
        state.list[i].done = param.status
      }
    },
    // 清除已完成的任务
    cleanDone(state) {
    
    
      state.list = state.list.filter(x => x.done === false)
    },
    // 修改视图的关键字
    changeViewKey(state, key) {
    
    
      state.viewKey = key
    }
  },
  actions: {
    
    
    getList(context) {
    
    
      axios.get('/list.json').then(({
    
     data }) => {
    
    
        // console.log(data)
        context.commit('initList', data)
      })
    }
  },
  getters: {
    
    
    // 统计未完成的任务的条数
    unDoneLength(state) {
    
    
      return state.list.filter(x => x.done === false).length
    },
    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
    }
  }
})