Vuex
Vuex是类似Flux的状态管理库，专门用于Vue的状态管理。
对于那些不熟悉的人来说，Flux是Facebook创造的一种设计模式。Flux模式由四个部分组成，组成单向数据管道：
image
Vuex的灵感主要来自Flux和Elm Architecture。Vuex集成的核心是Vuex存储。
// store.js
const store = new Vuex.Store({
state,
mutations,
actions,
getters
})
Vuex存储（Vuex Store）包含四个对象：state、mutations、actions和getters。
state 只是一个包含需要在应用程序中共享的属性的对象。
// store.js
const state = {
numbers: [1, 2, 3]
}
这个state对象只包含了一个numbers数组。
mutations是负责直接改变存储状态的函数。在Vuex中，mutations总是以state作为第一个参数。此外，actions也可以不作为第二个参数传递有效负载：
// store.js
const mutations = {
ADD_NUMBER(state, payload) {
state.numbers.push(payload)
}
}
在Flux架构中，mutations中的函数通常用大写字母表示，以区别于其他函数，并用于工具和lint目的。在上面的示例中，创建了一个ADD_NUMBER()的mutations，它需要一个有效的payload并将该有效的payload推送到state.numbers数组中。
actions可以调用mutations。在提交mutations之前，actions还负责所有异步调用。actions可以访问context对象，该对象提供对state（使用context.state）、getter（使用context.getters）和commit函数（context.commit）的访问。
下面是一个简单的actions的示例，它只是传递预期的有效负载时直接提交mutations：
// store.js
const actions = {
addNumber(context, number) {
context.commit('ADD_NUMBER', number)
}
}
Vuex存储中的getters就像组件中的计算属性一样。getters主要用于执行一些计算和操作，以便在组件访问这些信息之前存储状态。
像mutations一样，getters可以访问state作为第一个参数。这里有一个叫getNumbers的getter，它只返回state.numbers数组：
// store.js
const getters = {
getNumbers(state) {
return state.numbers
}
}
最后store.js的代码如下所示：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
numbers: [1, 2, 3]
};
const mutations = {
ADD_NUMBER(state, payload) {
state.numbers.push(payload);
}
};
const actions = {
addNumber(context, number) {
context.commit("ADD_NUMBER", number);
}
};
const getters = {
getNumbers(state) {
return state.numbers;
}
};
export default new Vuex.Store({
state,
mutations,
actions,
getters
});
对于这样简单的一个示例，可能不一定需要Vuex存储。上面的示例只是用来向大家展示如何使用Vuex和简单的全局存储在实现上的直接区别。
当Vuex存储准备好之后，Vue应用程序可以在Vue实例中声明store对象，可以提供给Vue应用程序使用。
// main.js
import Vue from "vue";
import App from "./App";
import store from "./store";
new Vue({
el: '#app',
store,
components: {
App
},
template: '<App />'
})
有了Vuex存储之后，组件通常可以执行以下两种操作之一。他们要么：获取（GET）状态信息（通过访问store中state或getters）或者 调用（DISPATCH）actions。
下面创建的NumberDisplay组件，它通过将getNumbers存储getter映射到组件getNumbers计算属性来直接显示state.numbers数组。
<!-- NumberDisplay.vue -->
<template>
<div>
<h2>{{ getNumbers }}</h2>
</div>
</template>
<script>
export default {
name: 'NumberDisplay',
computed: {
getNumbers() {
return this.$store.getters.getNumbers
}
}
}
</script>
接着再创建一个NumberSubmit组件，允许用户通过addNumber方法映射到同名的actions，然后将新输入的数字添加到state.numbers：
<!-- NumberSubmit.vue -->
<template>
<div class="form">
<input v-model="numberInput" type="number" />
<button @click="addNumber(numberInput)">Add new number</button>
</div>
</template>
<script>
export default {
name: 'NumberSubmit',
data: () => ({
numberInput: 0
}),
methods: {
addNumber(numberInput) {
this.$store.dispatch('addNumber', Number(numberInput))
}
}
}
</script>
最后在App.vue中引入前面创建的组件：
<!-- App.vue -->
<template>
<div id="app">
<NumberDisplay/>
<NumberSubmit/>
</div>
</template>
<script>
import NumberDisplay from "./components/NumberDisplay";
import NumberSubmit from "./components/NumberSubmit";
export default {
name: "App",
components: {
NumberDisplay,
NumberSubmit
}
};
</script>
我们可以看到，Vuex通过引入显式定义的actions、mutations和getters 扩展了简单的存储方法。这就是使用Vuex的最初标准和主要优势所在。此外，Vuex和vue-devtools集成在一起，提供了更易的调试功能。
下图就是一个关于vue-devtools如何帮助我们在发生突变时观察存储信息：
image
Vuex不是唯一个用来管理Vue状态的库，类似于Flux的库在社区中还有很多种，比如redux-vue或vuejs-redux，用于扩展Redux。然而，由于Vuex是专门为Vue应用程序而定制的，因此它无疑是最容易与Vue应用程序集成在一起。
Vuex扩展了简单的存储方法，使我们的应用程序的状态管理变得更简单。
原文: https://www.w3cplus.com/vue/managing-state-in-vue-js.html?utm_source=tuicool&utm_medium=referral © w3cplus.com
网友评论