vuex-4.0.0-alpha.1 体验

安装

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'

// 创建应用
const app = createApp(App)
// 注册 store
app.use(store)



// page

import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
    setup(){
        // 获取store实例
        const store = useStore()
        // 绑定响应
        const name = computed(() => store.state.name)
        const fullName = comoputed(() => store.getters.fullName)
        const target = computed(() => store.state.subModel.target )
        return {
            
            name,
            fullName,
            target
        }

    }

}

使用对比

• state

// old
{
    computed:{
        name(){ return this.$store.state.name },
        ...mapState('moduleName', [...])
    }

}

// new
{
    
    setup(){

        // 单一值引入
        const name = computed(() => store.state.name )

        // 引入整个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 )

        // 引入整个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 // 不响应值变化
            observeName: store.getters.observeName // 响应值变化
        }
    }
    
}

通过 getter 返回包装后值，减少组件内的 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 响应值变化， nameCopy 未响应,

• state ref

{
    state: {
        refName: ref('name')
    }
}


// page
{
    setup(){
        const store = useStore()
        
        return {
            refName: store.state.refName
        }
    }，
   template:`
        
        <input v-modle='refName'></input>

    `
}

直接使用 ref 作为state， 类似实现全局变量, 不推荐这种使用方式 直接屏蔽单项数据流模式。

总结

新的vuex 基础使用及api 没要太大变化, 调用方式更灵活. 但在当前的新的vue 版本下， vuex 存在的意义不大.

对于中小项目， 完全可以依靠 vue 实现自定义的全局状态管理工具.