vuex的核心概念

vuex的核心概念：

• State
• Mutation
• Action
• Gentter

State

提供惟一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

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

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

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

从vuex中按需导入mapState函数
import {{mapState}} from 'vuex'

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

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

Mutation

用于变更Store中的数据。

1.只能通过mutation变更Store的数据 ，不可以直接操作Store中的数据

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

mutition的使用

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

如何在组建中调用mutations中的函数

methods: {
handlel() {
//触发mutations的第一种方式
this.$store.commit('add')
}
}

如何在调用mutations时传递参数

//定义Mutation
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
addN(state,step) {
//变更状态
state.count+=step
}
}
})

组件如何传递参数：

commit作用就是调用某个mutations函数

methods: {
handle2() {
this.$store.commit('addN',4)
}
}

触发mutations的第二种方式

//首先，需要从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex' 

store:

 mutations: {
    //count减一
    sub(state) {
      state.count--
    },
}

使用mapMutations调用mutations中的函数，在定义一个函数调用该函数

methods: {
        ...mapMutations(['sub']),
        btnSub() {
          this.sub()
        }
      }

传参：

  mutations: {

    //count减N
    subN(state,step) {
      state.count-=step
    },
}

组件中使用

      methods: {
        ...mapMutations(['subN']),
        btnSub1() {
          this.subN(5)
        }
      }

注意：不要在Mutations中执行异步操作

Action

用于处理异步任务

如果 通过异步操作变更数据，必须通过Action，而不能只用Mutation，但是在Action中还要通过触发Mutations的方式变更数据。Mutations中只允许写同步的代码

const store = new Vuex.Store({
mutations: {
add(state) {
state.count++
}
},
 //在actions中，不能直接修改state中的数据；
 //必须通过context.commit() 触发某个mutations才行
actions: {
addAsync(context) {
setTimeout(() =>{
context.commit('add')
},1000)
}
}
})

触发Action的方式一

methods: {
handle() {
//这里的dispatch函数，专门用来触发action
this.$store.dispatch('addAsync')
}
}

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

actions: {
    addNAsync(context,step){
      setTimeout(() =>{
        context.commit('addN',step)//这里调用的addN是mutations内的
      },1000)

    }
}

组件使用

    btnHandler4() {
          this.$store.dispatch('addNAsync',5)
        }

触发Action的方式二

this.$store.dispatch()是触发actions的方式一，方式二为：需要导入mapActions函数

import {mapActions} from 'vuex'

在actions中定义一个异步的函数

actions: {
    subAsync(context) {
      setTimeout(() =>{
        context.commit('sub')//sub是mutations中的
      },1000)
    }
}

组件使用

  import {mapState,mapMutations,mapActions} from 'vuex'

   methods: {
        ...mapActions(['subAsync']),
        btnSub2() {
          this.subAsync()
        }
      }

携带参数

在actions中定义函数

    subNAsync(context,step) {
      setTimeout(() => {
        context.commit('subN',step)
      },1000)
    }

页面使用，同样也需要导入mapActions

  import {mapState,mapMutations,mapActions} from 'vuex'
methods: {
        ...mapActions(['subAsync',"subNAsync"]),
        btnSub3() {
          this.subNAsync(8)
        }
      }

Getter

用于对Store中的数据进行加工处理形成新的数据，他不会改变store中的数据，只是对store中的数据起一个包装作用

• getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性
• store中的数据反生变化时，getter中包装出来的数据也会跟着变化。

Getter的包装

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

使用getter的第一种方式：

this.$store.getters.名称

使用方式二：

同样需要导入mapGetters

<h1>{{showNum}}</h1>  
import {mapGetters} from 'vuex'
     computed: {
        ...mapGetters(['showNum'])
      },