专栏首页方球vuex-4.0.0-alpha.1 体验

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 实现自定义的全局状态管理工具.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Inquirer.js 交互式命令行

    copy_left
  • golang fmt(格式换 I O接口)

    fmt 方法可以大致分为 print, scan两类, 根据基础方法可以构建特定方法。

    copy_left
  • plop js 模板工具

    copy_left
  • python模块学习

    py3study
  • 海康、大华摄像头RTSP接入实现WEB端无插件流媒体服务EasyNVR实现海康大华宇视摄像头内容网页播放的方法

    进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选...

    EasyNVR
  • TypeScript学习第四篇 - 类与继承

    (1). public 公有。在类里面、子类里面、类外面都可以访问。属性如果不加修饰符,默认就是公有。

    越陌度阡
  • sql语句中(+)的作用

    说明:以下示例中,表a是员工表,有a,b,c,d四个员工,性别都是男性m。表b是工资表,有a,b,d四个员工,工资对应的是1000,2000,4000。然后分别...

    职场亮哥
  • Python自动化开发学习20-Djan

    下面就从创建项目开始,一步一步先做一个页面出来。 一、先创建一个新的Django项目 项目名是:week20,App名是:app01

    py3study
  • Python学习 Day 6 模块

    在一个模块中,我们可能会定义很多函数和变量,但有的函数和变量我们希望给别人使用,有的函数和变量我们希望仅仅在模块内部使用。

    统计学家
  • vue2.0 + element-ui 实战项目-导航栏跳转路由(二)

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 github地址:https://gith...

    王小婷

扫码关注云+社区

领取腾讯云代金券