vuex核心概念注意：不允许直接修改state的值。必须通过mutation 2. 通过刚才导入的mapState函数，

vuex学习--vuex核心概念

通过vuex ，使用count值

注意：不允许直接修改state的值。必须通过mutation

import Vue from 'vue'
import Vuex  from 'vuex'
Vue.use(Vuex)
export default new  Vuex.Store({
state:{
count:0
}，
mutations：{
    // 定义mutation
    //这个state就是上面的state的对象
    add(state) {
        //变更状态 
        state.count++
    }
}，
actions：{
}

})

State

第一种方式

this.$store.state.count

页面中使用

<span>{{$store.state.count}}</span>

第二种方式

1.从vuex中按需导入 mapState 函数

import { mapState } from 'vuex'

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

将全局组件的count的数据。映射为当前的computed的属性

使用就，直接相当于使用计算属性即可

computed：{
...mapState(['count'])
}

页面中使用

<h3>{{count}}</h3>

Mutation

Mutation 用于变更Store 中的数据

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

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

第一种方式

//触发 mutation --不带参数methods:{
handle1(){
// 触发 mutations的第一种方式
this.$store.commit('add')
}
}

触发mutation可以携带参数，例如 step

const store =new Vuex.Store({
state:{
count:0
}，
mutations:{
    add(state) {
  // 变更状态 
state.count+=step
},
addN(state，step) {
  // 变更状态
state.count+=step
},
sub(state) {
  // 变更状态 -减减
state.count -- 
},
subN(state,step){
    state.count-=step
}
}

})

触发：

commit 的作用，就是调用某个 mutation 函数

methods:{
handle2(){
   // 在调用 commit函数，
   // 触发mutations 时携带参数
this.$store.commit('addN' ，3 )
}
}

第二种方式

this.$store.commit()是触发mutations 的第一种方式，触发mutations的第二种方式是：

页面

<button @click="btnsubHandler1">-1</button>
<button @click="btnsubHandler2">-n</button>

1.从vuex中按需导入 mapMutations 函数

import { mapMutations } from 'vuex'

通过刚才导入的mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods方法“

// 2.将制定的mutations函数， 映射为当前组件的 methods函数
methods :{
 	...mapMutations( ['add','addN'])
}

使用

import { mapState ，mapMutations } from  ‘vuex’computed:{
   ...mapState('count')
},
methods:{
 ...mapMutations(['sub' ,'subN'])，
    btnsubHandler1(){
       // 无参数
        this.sub()
    }
     btnsubHandler2(){
         //有参数 
        this.subN(3)
    }
}

结论：不要在 mutation里面，执行异步操作

Action

Action 用于处理异步任务

如果通过异步操作变更数据，必须通过Action ，而不能使用 Mutation ，但是在Action 中还是要通过触发 Mutation 的方式，简介变更数据

const store =new Vuex.Store( {
    mutations:{
        add(state) {
            state.count++
        },
         addN(state ,step) {
            state.count+= step
        }
    },
    actions：{
        //action中不能直接修改state中的值，如果需要修改，必须调用mutation
        
        // 异步
        addAsync(context){
            setTimeout(()=>{
             context.commit('add')
            },1000)
        },
        addNAsync(context, step){
            setTimeout(()=>{
             context.commit('addN' ,step)
            },1000) 
        }
    }
})

第一种方式

触发action [ dispatch ]

methods:{
     handle() {
         // 触发action的第一种方式
         this.$store.dispatch('addAsync')
    }
}

页面

<button @click="btnsubHandler3">+1 Async</button>

methods:{
 ...mapMutations(['sub' ,'subN'])，
    btnsubHandler1(){
       // 无参数
        this.sub()
    },
     btnsubHandler2(){
         //有参数 
        this.subN(3)
    },
    // 异步的让count 自增  +1
     btnsubHandler3(){
        this.$store.dispatch('addAsync')
    },
     btnsubHandler4(){
         //在调用dispatch函数，
         //触发actions时 携带参数
        this.$store.dispatch('addNAsync' ,5)
    }
}

第二种方式

this$store.dispatch()

是触发 actions的第一种方式，

触发第二种

1. 从vuex中按需导入 mapActions 函数

import  { mapActions } from ‘vuex’

2. 通过刚才导入的mapActions函数，将需要的actions 函数，映射为当前组件的methods方法

methods:{
...mapActions(['addAsync' ,'addNASync'])
}

简化操作

<button @click="btn3">+1 Async</button>
   
methods:{
 btn3(){
       this.addAsync()
    }}
    //也可以 直接写为
 <button @click="addAsync">+1 Async</button>
//可以直接将映射过来的addAsync 在代码中直接调用即可

Getter

Getter 用于对Store中的数据进行加工处理形成新的数据【包装作用】

Getter 可以对Store中已有的数据加工处理之后形成新的数据，类似于Vue的计算属性
Store 中数据发生变化， Getter 的数据也会跟着变化

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

第一种方式getters

this.$store.getters.名称
<h3>{{store.getters.showNum}}</h3>

第二种方式getters

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

页面渲染方式

<h3 >{{showNum}}</h3>