摘要：是什么是一个针对开发的状态管理模式。说简单点儿就是一个工具，可以管理修改或设置所有组件用到的数据，而不需要借助之前的或者在组件间传值。
Vuex是什么
Vuex是一个针对Vue.js开发的状态管理模式。说简单点儿就是一个工具，可以管理（修改或设置）所有组件用到的数据，而不需要借助之前的event bus或者props在组件间传值。
Vuex使用场景
大型单页应用程序，存在多组件共享数据的时候，需要用到
Vuex 核心内容
(一个容器对象，存储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({
// ...
})
}
(一个对象，保存的是更改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
摘要：而钻研最好的方式，就是阅读的源代码。整个的源代码，核心内容包括两部分。逃而动手脚的代码，就存在于源代码的中。整个源代码读下来一遍，虽然有些部分不太理解，但是对和一些代码的使用的理解又加深了一步。 笔记中的Vue与Vuex版本为1.0.21和0.6.2,需要阅读者有使用Vue，Vuex，ES6的经验。 起因 俗话说得好，没有无缘无故的爱，也没有无缘无故的恨，更不会无缘无故的去阅读别人的源...
摘要：我们通常称之为状态管理模式，用于解决组件间通信的以及多组件共享状态等问题。创建指定命名空间的辅助函数，总结的功能首先分为两大类自己的实例使用为组件中使用便利而提供的辅助函数自己内部对数据状态有两种功能修改数据状态异步同步。 what is Vuex ? 这句话我想每个搜索过Vuex官网文档的人都看到过， 在学习源码前，当然要有一些前提条件了。 了解Vuex的作用，以及他的使用场景。 ...
摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 前言 先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。 说实在话，我在阅读vuex文档的时候，也很难以去理解v...
摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 前言 先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。 说实在话，我在阅读vuex文档的时候，也很难以去理解v...
摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 前言 先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。 说实在话，我在阅读vuex文档的时候，也很难以去理解v...
阅读 3186·2023-04-25 18:43
阅读 845·2021-11-24 09:39
阅读 1332·2021-10-14 09:43
阅读 3858·2021-09-22 15:58
阅读 1806·2019-08-29 17:18
阅读 359·2019-08-29 14:14
阅读 3040·2019-08-29 13:01
阅读 1565·2019-08-29 12:33
