关于Vuex的初步使用

store.js文件中定义各个访问状态和方法

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex)
 
const state = {         //定义访问状态对象
    count : 44
}
 
const mutations = {      //定义触发状态对象方法,传入state整个对象
    jia(state) {
        state.count ++
    }
}
 
const getters = {     //类似计算属性，对state的数据进行复杂的逻辑计算，使用return返回结果
    count : function (state){
        return state.count += 100
    }
}
 
const actions =  {      //异步执行方法，传入参数context，等同于整个store
    jianplus (context) {
      context.commit("jia",10)    //调用mutations中的方法并传参
    }
 
  testplus ({commit}) {   //简写方式,使用{}  单独传入mutations对象
        commit(‘jian’)      //调用mutations中的方法
    }
 
three({commit,dispatch}){     //使用dispatch调用actions的方法
　　return dispatch('testplus').then(()=>{
　　　　commit('jianplus')
　　})
}
  },
 
Const moduleA = {     //定义一个模块，引入各个状态对象或方法
    state,
    mutations,
    getters,
    actions
}
 
export default new Vuex.Store ({     //没有使用模块时的写法
    state,
    mutations，
    gettrts，
    actions
})
 
// export default new Vuex.Store ({     //使用模块时的写法
//     modules : {
//         a : moduleA     //引入定义模块
//     }
// })

一、state   定义访问状态  定义的是常量

如何在HTML中访问：当未引入 mapState时，可通过$store去访问    引入时按照正常的变量使用

<h1>{{$store.state.count}}</h1>   //通过$store去访问

在vue文件中的定义：在计算属性computed位置进行引用，使用mapState

import {mapState } from ‘Vuex’       //引入 mapState
export default {
  name: 'test',
 
  data: () => ({
    test: '',
  }),
 
  methods: {
 
  },
 
  // computed: mapState([   //直接使用state中定义的count     注意这里是一个数组
  //   "count"
  // ])
 
  computed: mapState({    //对state中定义的count做运算后再使用   注意这里是一个对象
 count : state => state.count+1 }) 
 
}

二、mutations   定义触发访问状态的方法    触发方法为同步执行

如何使用：跟事件触发方法一样跟在各种事件之后，通过commit方法触发

<button type="button" @click="$tore.commit(“jia”)"></button>

如何传参：括号内第一个值为方法名，后面为传入参数,传入的参数可以为一个对象

<button type="button" @click="$tore.commit(“jia”,10)"></button>

在vue文件中的定义：在定义方法methods位置进行引用，使用mapMutations

import {mapState,mapMutations} from ‘Vuex’       //引入 mapMutations
export default {
  name: 'test',
 
  data: () => ({
    test: '',
  }),
 
  methods:mapMutations([     //定义mutations中的各个方法
    ‘jia’,
    ‘jian’
  ])
 
  computed: mapState({    //对state中定义的count做运算后再使用
    count : state =>  state.count+1
  })
}

三、getters      类似于计算属性  一般在对访问状态内的数据做复杂运算时使用

在vue文件中的定义：在计算属性computed位置进行引用，使用mapGetters

 computed : {         //vue文件中只能有一个computed,同时定义state时，需要改变写法
    ...mapState ({    //注意使用...
      "count”
    }),
 
    count () {        //调用getters中的count方法，将值return出去
      return this.$store.getters.count
    }

简化写法：引入mapGetters

import {mapState,mapMutations,mapGetters} from ‘Vuex’       //引入 mapGetters
export default {
  name: 'test',
 
  data: () => ({
    test: '',
  }),
 
  methods:mapMutations([     //定义mutations中的各个方法
    ‘jia’,
    ‘jian’
  ])
 
 computed : {         //vue文件中只能有一个computed,同时定义state时，需要改变写法
    ...mapState ({    //注意使用...
      "count”
    }),
 
    ...mapGetters([      //调用getters中的count
          "count”
      ])
  }
}

四、actions   异步触发方法

在vue文件中的定义：在定义方法methods位置进行引用，使用mapActions   也可以通过dispatch方法触发

import {mapState,mapMutations,mapGetters,mapActions} from ‘Vuex’       //引入 mapActions
export default {
  name: 'test',
 
  data: () => ({
    test: '',
  }),
 
methods:{
  ...mapMutations([
        ‘jia’,
        ‘jian’
    ]),
 
  ...mapActions([     //引入actions中定义的jiaplus方法
        ‘jiaplus’
    ])
}
 
 computed : {
    ...mapState ({
      "count”
    }),
 
    ...mapGetters([
          "count”
      ])
  }
}

<button type="button" @click="$tore.dispatch(“jiaplus”)"></button>

dispatch代表的是actions的整个对象，我们可以通过在其中一个actions中传入dispatch触发其他的actions方法，会有一个返回值

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  },
 
  actionB ({ dispatch, commit }) {
    // 组合，传入dispatch  调用actions的其他方法
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

五、modules  模块组   当有多个store对象时使用