前端面试题 | VUEX是如何传值的？

一、首先安装vuex,使用vuex

1.安装vuex依赖包 （npm install vuex --save）

2.新建store文件夹，创建js文件夹，引入vue实例和vuex,创建store对象，导出store

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

二、VueX的核心概念

• state

  vuex中的数据源，我们需要保存的数据就保存在这
  获取state中数据的方法：
  （一）this.$store.state
  （二）在组件中引入mapState
  import {mapState} from vuex
  computed:{
          ...mapState(['需要用的数据'])
  }

• Mutation

  可以更改state中的数据，好处：有益于监控所有数据的变化；坏处：不能执行异步操作

   

  • 组件访问方式1： this.$store.commit('add',传递的参数首先需要定义一个参数)

  • 组件访问方式2：import {mapMutation} from ...

    在methods里面使用 ...mapMutation(['add','abc','在mutations里面定义的函数名'])

    在methods直接调用this.add

• Action

  专门处理异步任务（不能直接修改state中的数据，只能通过context.commit('add')去出发mutation里面的方法）

const store = new Vuex.Store({
    state:{
        count:0    
    },
    mutation:{
        add(state,step){
            state.count += step        
        }
    },
//只能处理异步操作
    action:{
    addasync(context,step（传递的参数）){
         this.setTime(()=>{
             //通过commit调用mutation中的方法
           context.commit('add',在mutation中传递的参数)           
         },1000)     
     }
    }
})

• 组件访问方式1：$this.store.dispatch('addasync','传递的参数')

• 组件访问方式2：import {mapAction} from ...

  • 在methods里面使用 ...mapAction(['addasync','在action里面定义的函数名'])

    在methods直接调用this.addasync

• Getter

  • 用于对store中的数据进行加工处理形成新的数据
  • 使用方法同上，只不过名字需要改一下

• modules

  • modules，就是模块化的意思，因为是单一状态树，怕我们在state里面写的东西太多了，不好进行查找，那我们可以在我们的modules里面重新定义我们的一个模块，就是相当于一个store，里面也有我们所需要的五个属性，所进行的操作也是一样的