资讯专栏INFORMATION COLUMN

vuex基础详解

Little_XM / 2023人阅读

摘要:和单纯的全局对象有以下两点不同的状态存储是响应式的。改变中的状态的唯一途径就是显式地提交。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。

vuex入门 安装

vuex为我们提供了两种使用方法

直接引入

vuex下载地址:https://unpkg.com/vuex@2.0.0

下载之后用< script >标签包裹引入即可

打包的模式
npm install vuex --save

在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex:

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

当使用全局 script 标签引用 Vuex 时,不需要以上安装过程。

开始 vuex是什么?

vuex就是一个状态(数据)管理工具,每一个vuex都有一个store(仓库),store是一个容器,它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同:

1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

使用

创建vuex

var store = new Vuex.store({
    // 数据放在state中
    state:{
        msg:1
    },
    // 新建方法
    mutations:{
        // es6 写法
        jia(state){
            state.msg++
        }
    }
})

// 调用mutation中的"jia"方法
store.commit("jia")
// 查看数据状态
console.log(store.state.msg)

再次强调,我们通过提交 mutation 的方式,而非直接改变 store.state.count,是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外,这样也让我们有机会去实现一些能记录每次状态改变,保存状态快照的调试工具。有了它,我们甚至可以实现如时间穿梭般的调试体验。

在组件中使用

上面我们已将vuex创建,那么如何在组件中进行使用呢?
我们只需要在组件中利用计算属性rutern出store.state.msg即可,触发变化也只是在methods里面提交mutation.

var vm = new Vue({
    el:"#box"
    components:{
        home:{
            computed:{
                msg(){
                    return store.state.msg
                }
            },
            template:`  
{{msg}}
`, methods:{ jia:function(){ store.commit("jia") } } } } })
核心概念 state 单一状态树

Vuex 使用 单一状态树 —— 是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

单状态树和模块化并不冲突 —— 在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

在组件中获取state状态
computed:{
    msg(){
        return store.state.msg
    }
},

因为我们在根实例已经注册了store,所以我们也可以使用这种写法

computed:{
    msg(){
        return this.$store.state.msg
    }
},

这样我们在模块化的构建系统中,在每个需要使用 state 的组件中就不需要频繁地导入,并且在测试组件时不需要模拟状态。

mapState 辅助函数

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键:

computed: mapState({
    // 箭头函数可使代码更简练
    msg: state => state.msg,
})    
对象展开运算符

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?

对象展开运算符可以将mapstate与局部计算属性混合使用

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}
组件仍然保有局部状态

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

核心概念 getters

getters可以说是store的计算属性,它可以接受state作为第一参数和其他getters作为第二参数来进行计算,这样我们就可以在多个组件使用这个gtters而不必在每一个组建都书写一遍.

var store = new Vuex.store({
    // 数据放在state中
    state:{
        msg:1
    },
    // 新建方法
    mutations:{
        // es6 写法
        jia(state){
            state.msg++
        }
    },
    getters:{
       jiajia(state){
           state.msg+5
       } 
    }
})
同样,vuex也为我们定义了mapGetters
computed: {
  // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
      "jiajia",
    ])
  }
核心概念 mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

mutations:{
    // es6 写法
    jia(state){
        state.msg++
    }
},
提交载荷(Payload)

你可以向 store.commit 传入额外的参数,即 mutation 的 载荷(payload):

mutations: {
  increment (state, n) {
    state.msg += n
  }
}
对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象:

store.commit({
  type: "increment",
  amount: 10
})

当使用对象风格的提交方式,整个对象都作为载荷传给 mutation 函数,因此 handler 保持不变:

mutations: {
  increment (state, payload) {
    state.msg += payload.amount
  }
}
核心概念 actions

Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。

让我们来注册一个简单的 action:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit("increment")
    }
  }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时,你就知道 context 对象为什么不是 store 实例本身了。

实践中,我们会经常用到 ES2015 的 参数解构 来简化代码(特别是我们需要调用 commit 很多次的时候):

actions: {
  increment ({ commit }) {
    commit("increment")
  }
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91803.html

相关文章

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0
  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要:五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新,欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香,消溽暑。鸟雀呼晴,侵晓窥檐语。叶上初阳乾宿雨,水面清圆,一一风荷举。家住吴门,久作长安旅。五月渔郎相忆否。小楫轻舟,梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly;请::点击::集web前端最近很火的vue2框架资源;定时更新,欢迎 Star 一下。 苏...

    khs1994 评论0 收藏0
  • 基于vue+mint-ui的mobile-h5的项目说明

    摘要:把打包的目录修改成生产环境需要的目录。是域名的配置只要统一配置一项即可,方便。旨在增强团队开发协作提高代码质量和打造开发基石的编码规范,以下规范是团队基本约定的内容,必须严格遵循。 Vue作为前端三大框架之一,其已经悄然成为主流,学会用vue相关技术来开发项目会相当轻松。 对于还没学习或者还没用过vue的初学者,基础知识这里不作详解,推荐先去相关官网,学习一下vue相关的基础知识。 a...

    vboy1010 评论0 收藏0

发表评论

0条评论

Little_XM

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<