安裝
npm i -S vuex@4.0.0-alpha.1
or
yarn add vuex@4.0.0-alpha.1
例子
// store.js
import { createStore } from 'vuex'
const subModel = createStore({
namespaced: true,
state: {
target: 'xxx'
},
mutations: {
updateTarget(state, newTarget){
state.target = newTarget
}
}
})
export default createStore({
state: {
id: 'xxxx',
prefix: 'mini',
name: 'wolf'
},
getters: {
fullName(state){ return `${state.prefix}-${state.name}` }
},
mutations: {
updateName(state, newName){
state.name = newName
}
},
moduels:{ subModel }
})
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store.js'
// 創(chuàng)建應(yīng)用
const app = createApp(App)
// 注冊(cè) store
app.use(store)
// page
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup(){
// 獲取store實(shí)例
const store = useStore()
// 綁定響應(yīng)
const name = computed(() => store.state.name)
const fullName = comoputed(() => store.getters.fullName)
const target = computed(() => store.state.subModel.target )
return {
name,
fullName,
target
}
}
}
使用對(duì)比
- state
// old
{
computed:{
name(){ return this.$store.state.name },
...mapState('moduleName', [...])
}
}
// new
{
setup(){
// 單一值引入
const name = computed(() => store.state.name )
// 引入整個(gè)state
const name = computed( () => store.sate )
}
}
- getter
// old
{
computed:{
name(){ return this.$getters.state.name },
...mapGetters('moduleName', [...])
}
}
// new
{
setup(){
// 單一值引入
const name = computed(() => store.getters.name )
// 引入整個(gè)state
const name = computed( () => store.getters )
}
}
- mutation
// old
{
methods: {
updateName(){
this.$store.commit('method name', data)
},
...mapMutations([
'methodName'
])
}
}
// new
{
setup(){
const updateName = newName => store.commit("name", newName)
}
}
- action
// old
{
methods:{
load(){
this.$store.dispatch('methodName', data)
},
...mapActions(['methodName'])
}
}
// new
{
setup(){
const load = () => store.dispath('methodName', data)
}
}
hack
- getter observe
// 將computed 放在 getter中
{
state:{ name: 'coco' },
getters:{
observeName(state){
return computed(() => state.name)
}
}
}
// page
{
setup(){
return {
name: store.state.name // 不響應(yīng)值變化
observeName: store.getters.observeName // 響應(yīng)值變化
}
}
}
通過 getter 返回包裝后值庄撮，減少組件內(nèi)的 computed 包裝
- state data-prop
{
setup(){
return {
name: store.state.name,
nameCopy: store.state.name,
staticName: 'xxx'
}
},
template:`
<h1> {{ name }} </h1>
<h1> {{ nameCopy }} </h1>
<input v-model='name' />
<h1> {{ staticName }} </h1>
<input v-model='staticName' />
`
}
純值不能作為 v-model 綁定值, 隨著 input 的輸入, name 響應(yīng)值變化巡扇， nameCopy 未響應(yīng),
- state ref
{
state: {
refName: ref('name')
}
}
// page
{
setup(){
const store = useStore()
return {
refName: store.state.refName
}
}刀闷，
template:`
<input v-modle='refName'></input>
`
}
直接使用 ref 作為state， 類似實(shí)現(xiàn)全局變量, 不推薦這種使用方式 直接屏蔽單項(xiàng)數(shù)據(jù)流模式。
總結(jié)
新的vuex 基礎(chǔ)使用及api 沒要太大變化, 調(diào)用方式更靈活. 但在當(dāng)前的新的vue 版本下， vuex 存在的意義不大.
對(duì)于中小項(xiàng)目， 完全可以依靠 vue 實(shí)現(xiàn)自定義的全局狀態(tài)管理工具.
