在脚手架中使用vuex

使用步骤：

①store里的index.js就代表仓库
②在根组件中引入并注册
③子组件引入注册使用
④在子组件对象中使用方法方法里的数据为：this.$store.commit(" state，payload")
⑤在仓库的mutations中定义方法
⑥mutaions我们的函数中默认第一个参数就是state，第二个参数是payload

mapState自动映射计算属性：

computed:{
    
    
            // 计算属性一般是只读的，所以说，一般我们会把仓库中的状态映射成组件中的计算属性
            // 手动把仓库中的状态映射成组件中的计算属性
            // 可以在组件中模板中使用计算属性
            // count(){  // count是计算属性  计算属性可以写成一个方法
            //     return this.$store.state.count
            // }

 // 下面的代码自动的把仓库中的count状态映射了组件中的计算属性count
            ...mapState(['count','name','age'])
        },

mapGetters把仓库中的状态自动映射成组件的计算属性

  // 组件中的计算属性是根据data中的数据计算出一个新的数据
  getters:{
    
     // 把getters当成组件中的计算属性   getter是vuex中的计算属性
    failNumber(state){
    
      // 第1个参数也是状态
      let n = 0;
      state.list.forEach(item=>{
    
    
        if(item.score < 60){
    
    
          n++
        }
      })
      return n
    }
  },

自动映射

使用：this.$store.getters.falinumber
        computed:{
    
    
            // 把仓库中的getters映射成组件中的计算属性
            // 手动映射
            // failNubmer(){
    
    
            //     return this.$store.getters.failNumber
            // }

            // 把仓库中的getters自动映射成组件中的计算属性
            ...mapGetters(['failNumber'])
        },

Mutations：它是唯一用来修改数据的工具

import { mapMutations } from “vuex”

methods:{
    
    
  // add(){
    
    
    // 手动地提交的一个mutations
    // this.$store.commit("add")
  // }

  // 把仓库中的add这个mutations映射成组件的方法
  ...mapMutations(["add"]) // add是方法
}

mapActions把仓库中的的actions自动映射成组件的方法（操作异步状态，需要在仓库中的action中定义）

methods:{
    
    
  // addAsync(){
    
    
    // 在组件中需要dispath一个action
    // 在组件中要使用actions，需要dispath派发
    // this.$store.dispatch("addAsync")
  // }

  // 把仓库中的add这个mutations映射成组件的方法
  // ...mapMutations(["addAsync"]) // add是方法

  // 把仓库中的的action映射成组件的方法
  ...mapActions(["addAsync"])
}

  // 如果你对状态的操作是异步的
  // 需要把异步代码写在actions中
  // vuex作者规定的，不写在actions中，状态的变化不好跟踪
  actions:{
    
    
    addAsync(context){
    
     // actions中的第一个参数并不是状态，是context
      // 异步代码需要放在actoin中
      setTimeout(()=>{
    
    
        // 在action中需要手动的commit一个mutation
        // 因为在vuex中改变状态的唯一途径是mutation
        context.commit("add"); // 手动提交一个mutaion
      },3000)
    }
  }