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