Vue 3.x版本已经发布。对应新版本的Vue，Vuex 4.0做了部分修改。
安装
推荐使用createStore函数
内置Logger插件createLogger原来是从vuex/dist/logger导出的，现在已包含在核心模块中，直接从vuex包中导出
vuex 3.x安装
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
import getters from './getters'
import app from './modules/app'
import culture from './modules/culture'
import interact from './modules/interact'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
const store = new Vuex.Store({
getters,
modules: {
app,
culture,
interact
},
strict: debug,
plugins: debug ? [createLogger()] : []
})
export default store
// main.js
import Vue from 'vue'
import store from './store'
// ...
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
vuex 4.x安装
// store/index.js
import { createStore, createLogger } from 'vuex'
import getters from './getters'
import app from './modules/app'
import culture from './modules/culture'
import interact from './modules/interact'
const debug = process.env.NODE_ENV !== 'production'
const store = createStore({
getters,
modules: {
app,
culture,
interact
},
strict: debug,
plugins: debug ? [createLogger()] : []
})
export default store
// main.js
import { createApp } from 'vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')
Composition API
在setup中调用useStore函数，等效于其他地方使用的this.$store
<template>
<p>{{ count }} --- {{ double }}</p>
<button @click="increment">mutations + 1</button>
<button @click="asyncIncrement">actions + 1</button>
</template>
<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup() {
const store = useStore()
return {
// state
count: computed(() => store.state.app.count),
// getter
double: computed(() => store.getters.doubleCount),
// mutations
increment: () => store.commit('countIncrement'),
// actions
asyncIncrement: () => store.dispatch('asyncCountIncrement')
}
}
}
</script>
双向计算属性
vue 3.x扩展了v-model
vuex可以使用带有setter的双向计算属性的替代方法来使用v-model
<input v-model="message">
<script>
export default {
computed: {
message: {
get() {
return this.$store.state.app.message
},
set(value) {
this.$store.commit('updateMessage', value)
}
}
}
}
</script>
Typescript
vuex 4.x与Typescript一起使用时，必须声明自己的模块扩充
// vuex-shim.d.ts
import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'
declare module '@vue/runtime-core' {
// Declare your own store states.
interface State {
count: number
}
interface ComponentCustomProperties {
$store: Store<State>
}
}
发表评论