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') }) } }