资讯专栏INFORMATION COLUMN

Vuex

SimonMa / 1645人阅读

摘要:是什么是一个针对开发的状态管理模式。说简单点儿就是一个工具,可以管理修改或设置所有组件用到的数据,而不需要借助之前的或者在组件间传值。

Vuex是什么

Vuex是一个针对Vue.js开发的状态管理模式。说简单点儿就是一个工具,可以管理(修改或设置)所有组件用到的数据,而不需要借助之前的event bus或者props在组件间传值。

Vuex使用场景

大型单页应用程序,存在多组件共享数据的时候,需要用到
Vuex 核心内容

store

(一个容器对象,存储Vuex中的state,mutations,actions,getters等)

state (一个保存数据的对象,对象中的数据可以供所有组件使用)

// 1. 定义
const state = {
count: 0
}

// 2. 获取state中的值
this.$store.state.count

// mapState 辅助函数获取多个state的值
import { mapState } from "vuex"
computed: mapState({

// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 "count" 等同于 `state => state.count`
countAlias: "count",

})
computed: mapState([
// 映射 this.count 为 store.state.count
"count"
])

// 3. 与组件的计算属性混合使用
computed: {
localComputed () { / ... / },
// 使用对象展开运算符将此对象混入到外部对象中
...mapState({

// ...

})
}

mutations

(一个对象,保存的是更改state的函数,也只有它能更改state中的值,触发方式this.$store.commit("函数名",参数))

// 1. 定义
const mutations = {
  increment (state) {
    state.count++
  }
}

// 2. 触发
this.$store.commit("increment")

// 3. 传递参数,通常参数应该是一个对象
mutations: {
  increment (state, n) {
    state.count += n
  }
}
this.$store.commit("increment", 10)

// 4. 在组件的方法中使用
  methods: {
    ...mapMutations([
      "increment", // 将 `this.increment()` 映射为 `this.$store.commit("increment")`

      // `mapMutations` 也支持载荷:
      "incrementBy" // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit("incrementBy", amount)`
    ]),
    ...mapMutations({
      add: "increment" // 将 `this.add()` 映射为 `this.$store.commit("increment")`
    })
  }
actions

(一个对象,保存的是触发mutations的函数,让mutations去修改state中的值)

// 1. 定义
const actions = {
  increment: ({ commit }) => commit("increment")
}

// 2. 触发
this.$store.dispatch("increment")

// 3. 参数支持
this.$store.dispatch("incrementAsync", {
  amount: 10
})

// 4. 组件的方法中使用
  methods: {
    ...mapActions([
      "increment", // 将 `this.increment()` 映射为 `this.$store.dispatch("increment")`

      // `mapActions` 也支持载荷:
      "incrementBy" // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch("incrementBy", amount)`
    ]),
    ...mapActions({
      add: "increment" // 将 `this.add()` 映射为 `this.$store.dispatch("increment")`
    })
  }
getters

(一个对象,保存的是一些类似与计算属性的函数,可以通过他们得到任何依赖于state的新的数据)

// 1. 定义
const getters = {
  evenOrOdd: state => state.count % 2 === 0 ? "even" : "odd"
}

// 2. 使用
this.$store.getters.evenOrOdd

// 3. 使用其他getters作为参数
getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

// 4. 组件内使用
export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      "doneTodosCount",
      "anotherGetter",
      // ...
    ])
  }
}
使用vuex

npm install vuex -S

// store.js
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

// app.js
import store from "./store"

new Vue({
  el: "#app",
  store,
  render: h => h(Counter)
})


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

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

相关文章

  • Vuex源码阅读笔记

    摘要:而钻研最好的方式,就是阅读的源代码。整个的源代码,核心内容包括两部分。逃而动手脚的代码,就存在于源代码的中。整个源代码读下来一遍,虽然有些部分不太理解,但是对和一些代码的使用的理解又加深了一步。 笔记中的Vue与Vuex版本为1.0.21和0.6.2,需要阅读者有使用Vue,Vuex,ES6的经验。 起因 俗话说得好,没有无缘无故的爱,也没有无缘无故的恨,更不会无缘无故的去阅读别人的源...

    hosition 评论0 收藏0
  • Vuex源码学习(一)功能梳理

    摘要:我们通常称之为状态管理模式,用于解决组件间通信的以及多组件共享状态等问题。创建指定命名空间的辅助函数,总结的功能首先分为两大类自己的实例使用为组件中使用便利而提供的辅助函数自己内部对数据状态有两种功能修改数据状态异步同步。 what is Vuex ? 这句话我想每个搜索过Vuex官网文档的人都看到过, 在学习源码前,当然要有一些前提条件了。 了解Vuex的作用,以及他的使用场景。 ...

    livem 评论0 收藏0
  • Vue学习日记(四)——Vue状态管理vuex

    摘要:说实在话,我在阅读文档的时候,也很难以去理解,甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的。 说实在话,我在阅读vuex文档的时候,也很难以去理解v...

    fai1017 评论0 收藏0
  • Vue学习日记(四)——Vue状态管理vuex

    摘要:说实在话,我在阅读文档的时候,也很难以去理解,甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的。 说实在话,我在阅读vuex文档的时候,也很难以去理解v...

    zilu 评论0 收藏0
  • Vue学习日记(四)——Vue状态管理vuex

    摘要:说实在话,我在阅读文档的时候,也很难以去理解,甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的。 说实在话,我在阅读vuex文档的时候,也很难以去理解v...

    fjcgreat 评论0 收藏0
  • vuex入门

    摘要:使用,引入之后用进行引用。在模板中引入们刚建的文件,并在模板中用输出的值。在文件中加入两个改变的方法。和单纯的全局对象有以下两点不同的状态存储是响应式的。改变中的状态的唯一途径就是显式地提交。 vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通俗的解释就是,Vuex 就是为 vue 组件之间进行数据共享而开发的插件。 vuex 什么时候用? 实现数据...

    weakish 评论0 收藏0

发表评论

0条评论

SimonMa

|高级讲师

TA的文章

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