学习vuex的基本框架和调用方法

state(数据存放)

1.state定义

    userId: '',
    name: '',
    token: '',
    id:1,
  }

2.组件定义和触发

import {mapState} from ‘vuex’
computed:{
...mapState(['usrId','name','token'])
},

getter (对store中的数据进行加工处理形成新数据，但是不会修改state的数据，起到包装作用)

1.getter 定义

getters: {
    userIdDouble (state){
      return state.userId * 2
  }

2.触发

import {mapState,mapMutations,mapActions} from ‘vuex’
computed:{
...mapGetters(['userIdDouble‘])
},

Mutations对store中的数据修改，修改就用Mutations

1.Mutations定义

Mutations: {
    add(state){
      state.id++
        },
  }

2.触发

import {mapState,mapMutations,mapActions} from ‘vuex’
methods:{  
//在第一行先挂在mutations，里边加入需要修改的mutations函数名
...mapMutations(['add‘])
},
//然后在函数中可以直接进行调用
this.add()

Actions对store中的数据异步修改，在异步中不能直接修改state，需要用context.commit（‘add’）来修改

1.Actions定义

Actions: {
    addAsync(context){
        setTimeout(()=>{
          context.commit('add')   //触发修改mutations来进行修改
        },1000)
    }
  }

2.触发

//第一种触发
this.$store.dispath()
import {mapState,mapMutations,mapActions} from ‘vuex’
methods:{  
//在第一行先挂在mutations，里边加入需要修改的mutations函数名
...mapMutations(['add'])
...mapActions(['addAsync'])
},
//然后在函数中可以直接进行调用
this.addAsync()