快速上手
安装vuex。
npm install vuex@3
注册Vuex。
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'//1
Vue.config.productionTip = false
Vue.use(Vuex)//2
const store = new Vuex.Store({
strict: true,
state: {
v: 0
}
})//3
new Vue({
render: h => h(App),
store//4
}).$mount('#app')
访问state。
<template>
<div>
<h1>这是{{ $store.state.v }}</h1>
</div>
</template>
State
核心状态数据。
可以将state映射为组件的计算属性。
<template>
<div>
<h1>这是{{ v }}</h1>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed:{
...mapState(['v'])
}
}
</script>
<style scoped>
</style>
Mutations
用于修改状态。
const store = new Vuex.Store({
strict: true,
state: {
v: 0
}, mutations: {
addV(state) {
state.v++
}
}
})
调用它。
<h1 @click="$store.commit('addV')">这是{{ v }}</h1>
可以传参。
const store = new Vuex.Store({
strict: true,
state: {
v: 0
}, mutations: {
addV(state, v) {
state.v += v
}
}
})
调用它。
<h1 @click="$store.commit('addV',3)">这是{{ v }}</h1>
可以将mutations映射为组件的方法。
<template>
<div>
<h1 @click="addV(3)">这是{{ v }}</h1>
</div>
</template>
<script>
import { mapState,mapMutations } from 'vuex';
export default {
computed:{
...mapState(['v'])
},methods:{
...mapMutations(['addV'])
}
}
</script>
<style scoped>
</style>
Actions
异步操作。
const store = new Vuex.Store({
strict: true,
state: {
v: 0
}, mutations: {
addV(state, v) {
state.v += v
}
}, actions: {
addVA(context, v) {
setTimeout(() => {
context.commit('addV', v)
}, 1000)
}
}
})
调用它。
<h1 @click="$store.dispatch('addVA',4)">这是{{ v }}</h1>
可以将actions映射为组件的方法。
import { mapState,mapMutations,mapActions } from 'vuex';
export default {
computed:{
...mapState(['v'])
},methods:{
...mapMutations(['addV']),
...mapActions(['addVA'])
}
}
Getters
由data衍生的状态。
const store = new Vuex.Store({
strict: true,
state: {
v: 0
}, mutations: {
addV(state, v) {
state.v += v
}
}, actions: {
addVA(context, v) {
setTimeout(() => {
context.commit('addV', v)
}, 1000)
}
}, getters: {
V(state) {
return state.v + 1
}
}
})
访问它。
$store.getters.V
可以将getters映射为组件的计算属性。
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
export default {
computed:{
...mapState(['v']),
...mapGetters(['V'])
},methods:{
...mapMutations(['addV']),
...mapActions(['addVA'])
}
}
模块拆分
单独的js文件。
export default {
state: {
v: 0
}, mutations: {
addV(state, v) {
state.v += v
}
}, actions: {
addVA(context, v) {
setTimeout(() => {
context.commit('addV', v)
}, 1000)
}
}, getters: {
V(state) {
return state.v + 1
}
}
}
main.js中使用模块。
import abc from "./store.js"
const store = new Vuex.Store({
modules: {
abc
}
})
访问state。
$store.state.abc.v
映射方式变化了。
export default {
namespaced: true,//这里需要添加
state: {
v: 0
}
。。。
}
map函数第一个参数为模块名。
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
export default {
computed:{
...mapState('abc',['v']),
...mapGetters('abc',['V'])
},methods:{
...mapMutations('abc',['addV']),
...mapActions('abc',['addVA'])
}
}
访问getters。
$store.getters['abc/V']
mutations,actions同理。
$store.commit('abc/addV',1)
$store.dispatch('abc/addVA',1)