vuex从入门到精通

store.js

import Vue from 'vue'
import Vuex fom 'vuex'

Vue.use(Vuex)

export  default new vuex.store({
state:{ count：0 },
mutations:{ },
actions:{}
})

main.js

import Vue from 'vue'
import App form './App.vue'
import store form './store'

 Vue.config.productionTip = false

new Vue({
store,
render: h =>h(App)
}).$mount('#app')

State

//创建store数据源，提供唯一公共数据
const store = new vuex.store({
state:{ count：0 },
mutations:{ },
actions:{}
})

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

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

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

//1.从vuex中按需导入mapState函数
import { mapState } from ‘vuex’ 

通过刚才导入的mapState函数，将当前租价需要的全部数据，映射为当前组件的computed计算属性

//2.将全局数据，映射为当前数组的计算属性
computed：{
    ...mapState(['count'])
}

Mutation

Mutation用于变更Store中的数据。
1，只能通过mutation变更Store数据，不可以直接操作Store中的数据。
2，通过这种方式最然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

//定义Mutation
const store = new Vuex.Stroe({
    state:{
      count:0 
    },
    mutations:{
        add(state){
        //变更状态
          state.count++
        } 
    }
})

//触发mutation的第一种方式

//触发mutation
methods：{
    handel（）{
    //触发mutation的第一种方式
      this.$store.commit('add')
    }
}

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

//定义Mutation
const store = new Vuex.Stroe({
    state:{
      count:0 
    },
    mutations:{
        add(state，step){
        //变更状态
          state.count+= step
        } 
    }
})

//触发mutation
methods：{
    handel2（）{
    //在调用commit函数，
    //触发mutations时携带参数
      this.$store.commit('add'，3)
    }
}

触发mutations的第二种方法

//1，从vuex中按需导入mapMutations函数
import {mapMutations } from ‘vuex’
//2.将指定的mutations函数，映射为当前组件的methods的函数
methods：{
    ...mapMutations(['add','addN'])
}

Action

Action用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。

//触发actions的第一种方式

//定义Action
const store=new Vuex.Store({
  mutations:{
    add(state){
      state.count++
    }
  }，
  actions:{
      addAsync(context){
          setTimeout(()=>{
              context.commit('add')
          }，1000)
      }
  }
})

//触发Action
methods：{
    handle（）{
        //触发actions的第一种方式
        this.$store.dispatch（‘addAsync’）
}
}

触发actions异步任务时携带参数：

//定义Action
const store=new Vuex.Store({
  mutations:{
    addN(state，step){
      state.count+= step
    }
  }，
  actions:{
      addAsync(context，step){
          setTimeout(()=>{
              context.commit('addN'，step)
          }，1000)
      }
  }
})

//触发Action
methods：{
    handle（）{
        //在调用dispatch函数，
        //触发actions时携带参数
        this.$store.dispatch（‘addAsync’，5）
}
}

//触发actions的第二种方式

// 1.从vuex中按需导入mapActions函数
import { mapActions } form ‘vuex’
//2.将指定的actions函数，映射为当前数组的methods函数
methods：{
    ...mapActions(['addASync','addNASync'])
}

Getter

Getter用于对Store中的数据进行加工处理形成新的数据。
1，Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
2，Store中数据发生变换，Getter的数据回跟着变化。

//定义Getter
const store = new Vuex.store({
    state:{
        count:0
    }
    getters:{
        showNum: state => {
            return '当前最新的数量是【'+ state.count +'】'
        }
    }
})

使用getter的第一种方式：

this.$store.getters.名称 

使用getter的第二种方式：

import  { mapGetters } form  'vuex'
export default {
    computed：{
       ...mapGetters(['showNum'])
  }
}