vue学习之抄写vuex笔记

一、Vuex概述

0. 组件之间共享数据的方式

   父向子传值： v-bind(😃 属性绑定

   子向父传值：v-on(@) 时间绑定

   兄弟组件之间的共享数据：EventBus

   + $on           接受数据的那个组件
   + $emeit      发送数据的那个组件
   

1. Vuex是什么

   Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

2. 使用Vuex统一管理状态（数据）的好处

   • 能够在Vuex中集中管理共享的数据，易于开发和后期维护
   • 能够高效地实现组件之间的数据共享，提高开发效率
   • 存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步

3. 什么样的数据适合存储到Vuex中

   一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；

   对于组件中的私有数据，依旧存储在组件自身的data中即可

二、Vuex的基本使用

0. 按照vuex安装包

1. 导入vuex

2. 创建store对象

   state中存放的就是全局共享的数据

3. 将store对象挂载到vue实例中

三、Vuex的核心概念

vuex的主要核心概念如下：

• state
• mutation
• action
• getter

1. state

   state 提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储

   组件访问state中数据的第一种方式：

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

   组件访问state中数据的第二种方式：

   // 从vuex中按需导入mapState函数
   import {mapState} from 'vuex'
   // 通过干次啊导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性
   // 将全局数据，映射未当前组件的计算属性
   computed:{
    ...mapState(["count"])   
   }
   

2. mutation

   mutation用于变更store中的数据

   • 只能通过mutation变更store数据，不可以直接操作store的数据

   • 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

   • 可以在触发mutations时传递参数

     const store = new Vuex.Store({
         state:{
             count:0
         },
         mutations:{
             add(state){
                 // 变更状态
                 state.count ++
             }
                 addN(state,step){
                 // 变更状态
                 state.count += step
             }
         }
     })
     ​
     // 触发mutation的第一种方式
     methods:{
         handle(){
             // 触发mutations的第一种方式
             this.$store.commit('add')
           }
             handle(){
             // 触发mutations的第一种方式
             this.$store.commit('add',3)
           }
     }
     ​
     // 触发mutation的第二种方式
     // 1. 从vuex中按需导入mapMutations函数
     import {mapMutations} from "vuex"
     // 通过导入的mapMutation函数，映射当前组件未methods函数
     methods:{
         ...mapMutations(["add","addN"])
     }
     

3. action

   action用于处理异步任务

   如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方式间接变更数据。

   // 定义action
   const store = new Vuex.Store({
       // ...省略其他代码
       mutations:{
           add(state){
               state.count++
           }
             addN(state,step){
               // 变更状态
               state.count += step
           }
       },
       actions:{
           addAsync(context){
               setTimeout(() => {
                   contexte.commit('add',1000)
               })
           }
               addAsync(context){
               setTimeout(() => {
                   contexte.commit('add',1000)
               })
           }
       }
   })
   ​
   ​
   ​
   // 触发action
   methods:{
       handle(){
           // 第一种方式
           this.$store.dispatch('addAsync')
       }
        handle(){
           // 携带参数
           this.$store.dispatch('addAsync',5)
       }
   }
   ​
   // 第二种方式
   // 从vuex中按需导入masActions函数
   import {mapActions} from 'vuex'
   //通过导入的mapactions函数，映射当前组件为methods函数
   methods:{
       ...mapActions(['addAsync','addNasync'])
   }
   ​
   

4. getter

   getter用于对store中的数据进行加工处理形成新的数据

   • getter可以对store中已有的数据加工处理之后形成新的数据，类似vue的计算属性

   • store中的数据发生变化，getter的数据也会跟着变化

     const store = new Vuex.Store({
         state:{
             count:0
         },
         getters:{
             showNum:state => {
                 return '当前最新的数量'+state.count
             }
         }
     })
     

   使用getters的第一种方式：

   this.$store.getters.名称
   

   使用getters的第二种方式：

   import {mapGetters} from 'vuex'
   computed:{
       ...mapGetters(['showNum'])
   }
   

如何清除已完成的任务？ 过滤，重新赋值