vuex desde la entrada hasta el combate real TodoList multifunción

1. El concepto de portada principal de vuex

Vuex es un modo de administración de estado desarrollado específicamente para aplicaciones Vue.js. Utiliza almacenamiento centralizado para gestionar el estado de todos los componentes de la aplicación y utiliza las reglas correspondientes para garantizar que el estado cambie de forma predecible. Puede realizar fácilmente el intercambio de datos entre componentes

1.1 estado

El estado proporciona el único recurso de datos y todos los datos compartidos deben almacenarse en el estado en la tienda.

• La primera forma de acceder al estado en los componentes:

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

• La segunda forma de acceder al estado en los componentes:

1. Importe la función mapState de vuex según sea necesario. A través de la función mapState
import {mapState} from 'vuex'
recién importada, asigne los datos globales requeridos por el componente actual a las propiedades calculadas del componente actual
2. Asigne los datos globales a las propiedades calculadas del componente actual
computed :{ ...mapState(['count']) }

1.2 mutación

Las mutaciones se utilizan para cambiar los datos en la tienda
① Los datos de la tienda solo se pueden cambiar mediante mutación y los datos en la tienda no se pueden manipular directamente.
②Aunque la operación es un poco engorrosa de esta manera, puede monitorear centralmente los cambios de todos los datos.

1. this.$store.commit()Es la primera forma de desencadenar mutaciones,

//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 segunda forma de desencadenar mutaciones: mediante el mapeo de funciones

1. Importe la función mapState de vuex según sea necesario. A través de la función mapState
import {mapMutations} from 'vuex'
recién importada, asigne los datos globales requeridos por el componente actual a las propiedades de cálculo calculadas del componente actual.
2. Asigne la función de mutaciones especificada a la función de métodos del componente actual
methods:{ ...mapMutations(['add']) }

1.3 acción

用于处理异步任务
Si cambia los datos a través de operaciones asincrónicas, debe usar Acción en lugar de Mutación, pero aún necesita
cambiar indirectamente los datos activando Mutación en Acción .

1. this.$store.dispatchEs la primera forma de desencadenar acciones.

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


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

Activar una tarea asincrónica con parámetros

  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 segunda forma de desencadenar acciones: mediante el mapeo de funciones

1. Importe la función mapState de vuex según sea necesario. A través de la función mapState
import {maptActions} from 'vuex'
recién importada, asigne los datos globales requeridos por el componente actual a las propiedades de cálculo calculadas del componente actual.
2. Asigne la función de mutaciones especificada a la función de métodos del componente actual
methods:{ ...maptActions(['addAsync']) }

1.4 captador

Getter procesa los datos en la Tienda para formar nuevos datos. No modificará los datos originales en el estado, pero juega el papel de empaquetar datos.
① Getter puede formar nuevos datos después de procesar los datos existentes en la Tienda, similar a las propiedades calculadas de Vue.
② Si los datos en la Tienda cambian, los datos de Getter también cambiarán.

1. this.$store.getters.名字Sí, la primera forma de llamar a los captadores

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

2. A modo de mapeo de funciones

1. Importe la función mapState de vuex según sea necesario. A través de la función mapState
import {maptGetters} from 'vuex'
recién importada, asigne los datos globales requeridos por el componente actual a las propiedades de cálculo calculadas del componente actual.
2. Asigne la función de mutaciones especificada a la función de métodos del componente actual
computed :{ ...maptGetters(['showNum']) }

2. Utilice vue para implementar la función todoList

Preparación para el desarrollo

• biblioteca de componentes antd-vue
• vuex

análisis de demanda

• Agregar función de evento
• Marcar función de evento
• Eliminar función de evento

Compartir código

Código de componente 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>

Código de gestión estatalstore.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
    }
  }
})