第 2 部分：了解 Vuex：一个状态管理库。

缺乏、安全感 2024-03-16 19:05 40阅读 0赞

**什么是 Vuex？**

在现代 Web 应用程序中，当应用程序的大小和复杂性增加时，管理状态可能会变得混乱。这就是 Vuex 的状态管理库 Vuex 的用武之地。将 Vuex 存储视为一个大容器，其中包含组件所需的所有重要信息。无需在组件之间来回传递数据，您只需将其放入商店并从应用程序的任何位置访问它。它提供了一种集中式方法来管理应用程序所有组件中使用的数据。

注意：在本系列中选择使用 Vuex 是因为我使用的是 Vue 2。如果有机会你想了解 Pinia，这是 VueJs 中新的状态管理，请查看[这里][Link 1]。

Vuex 遵循一种单向流模式，这有助于保持清晰且可预测的数据流，从而更容易理解和调试应用程序的状态变化。

在单向流模式中，数据来自一个源，在 Vuex 的例子中是“存储”。存储包含应用程序的状态，组件可以通过提交变更或调度操作来访问和修改状态。

此处的示例代码 src/store/index.js

以下是 Vuex 中关键组件和概念的细分：

1. `state`：状态代表应用程序的数据。它是一个单一的 JavaScript 对象，充当整个应用程序的真实来源。所有组件都可以访问状态但不能直接修改它。

2. `getters`：getter 是允许您从存储中派生和访问特定状态的函数。它们提供类似计算属性的接口来访问状态并对其执行计算或转换。

3. `mutations`: Vue中的突变帮助我们以可控的方式更新和修改数据。它们使我们的组件能够根据不同的条件或用户交互做出反应和改变。这就像对某事进行更改或调整以使其与众不同。例如，当您有一张图片并且您决定在其上绘制或绘制一些新内容以改变它的外观时。要更改 vuex 状态，您必须通过分派操作或直接从组件调用它来提交更改。

4. `actions`: Actions类似于mutations，但是可以处理异步操作。操作可以提交突变并执行诸如从 API 获取数据、更新状态，然后提交突变以修改状态等任务。动作是通过分派动作来调用的。

5. `modules`：随着应用程序的增长，管理大型集中式状态可能变得具有挑战性。Vuex 中的模块有助于将状态和相关逻辑分解为更小、可重用和可管理的块。每个模块都可以有自己的状态、getters、突变和动作。

**组件 Vuex 通信**

在此示例中，我们将使用 Vuex 存储作为我们的中央数据存储介质来创建一个迷你应用程序。为了这个练习，我们还将利用模块系统将商店分成更小的部分。通常模块应该在商店规模增加时发挥作用，但我会做一个简短的例子，这样你就可以看到它是如何工作的。

此示例基于处理表单输入以在用户从组件内调度操作时更新商店中的状态。更新后的数据随后呈现在组件页面上。

*  创建状态数据、动作和突变

源代码/商店/index.js

<code>import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
 state: {
 id: 2,
 name:'Component vue communication',
 stack:'VueJs',
 },
 getters: {
 getUserName(state){
 return state.name;
 }
 },
 mutations: {
 SET_USERNAME(state, payload){
 state.name = payload
 }
 },
 actions: {
 actionSetUsername({ commit }, data){
 commit('SET_USERNAME' , data);
 }
 },
 modules: {
 }
 })
 </code>

*  在 MyComponent 中，单击“设置名称”按钮时将调度“actionSetUsername”操作
 *  您还必须映射商店中的用户名值以显示当前值

源/商店/MyComponent.vue

<code><template>
 <div>
 <h1>{
 { name }}</h1>
 <p>{
 { email }}</p>
 <p>{
 { myProp }}</p>
 <button @click="sendMessage">Send Message</button>
 
 <div class="container">
 <form @submit.prevent="submit">
 <input 
 v-model.trim="storeName" 
 type="text" 
 class="form__input btn_common"
 >
 <button class="container__btn btn_common">Set Name</button>
 </form>
 
 
 <h2>{
 { username }}</h2>
 </div>
 </div>
 </template>
 
 <script>
 
 import { mapState, mapActions } from 'vuex'
 
 export default {
 name: 'MyComponent',
 props: {
 myProp: String
 },
 data() {
 return {
 storeName: '',
 name: 'Makanju Emmanuel',
 email: 'makurseme@gmail.com'
 }
 },
 methods: {
 ...mapActions(['actionSetUsername']),
 sendMessage() {
 this.$emit('message-sent', 'Hello from child!')
 },
 submit(){
 if(this.storeName !== ''){
 this.actionSetUsername(this.storeName)
 } 
 }
 },
 computed: {
 ...mapState({
 username: state => state.name,
 })
 }
 }
 </script>
 
 <style lang="scss" scoped>
 /* styles g*/
 .container {
 width: 40%;
 margin: 1rem auto; 
 box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
 border-radius: 5px;
 padding: 10px 5px; 
 
 & .btn_common {
 border: .75px solid #7373ed;
 padding: 5px 10px;
 border-radius: 5px;
 }
 
 & .form__input {
 outline: none;
 margin-right: 5px;
 }
 }
 </style>
 </code>

最终结果的快照

![436d43b8f36e98b258bc783201c260ab.png][]

**如何创建一个 vuex 模块**

当事情变得臃肿时，你可以创建尽可能多的模块来将存储数据分解成小的和可管理的块。例如：在学校门户中，您可以创建一个处理身份验证的用户模块，您还可以创建另一个模块来管理学生记录等。

*  在您的商店目录中创建一个新的模块文件夹
 *  创建模块文件：在新文件夹中为您的 Vuex 模块创建一个单独的模块文件。此文件将包含特定于您的模块的状态、突变、操作和获取器。

<code>
 const myModule = {
 namespaced: true,
 state: {
 // Your module-specific state
 count: 0,
 },
 mutations: {
 // Your module-specific mutations
 INCREMENT(state){
 state.count += 1;
 }
 },
 actions: {
 // Your module-specific actions
 incrementCount({commit}){
 commit('INCREMENT');
 },
 },
 };
 
 export default myModule;
 
 </code>

*  在商店中注册模块：将模块文件导入 Vuex 商店，并使用 modules 属性将其注册为模块。该模块将在指定的命名空间下命名空间。

<code>import Vue from 'vue'
 import Vuex from 'vuex'
 import myModule from '../store/modules/myModule'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
 state: {
 id: 2,
 name:'Component vue communication',
 stack:'VueJs',
 },
 getters: {
 getUserName(state){
 return state.name;
 }
 },
 mutations: {
 SET_USERNAME(state, payload){
 state.name = payload
 }
 },
 actions: {
 actionSetUsername({ commit }, data){
 commit('SET_USERNAME' , data);
 }
 },
 modules: {
 mod: myModule //register your module here
 }
 })
 
 </code>

*  访问组件中的模块：您现在可以使用 $[store][] 对象在 [Vue][store] 组件中访问模块的状态、突变、操作和 getter。要访问特定于模块的元素，您需要在它们前面加上模块的命名空间。

源/商店/[MyComponent.vue][Link 1]

<code><template>
 <div>
 <h1>{
 { name }}</h1>
 <p>{
 { email }}</p>
 <p>{
 { myProp }}</p>
 <button @click="sendMessage">Send Message</button>
 
 <div class="container">
 <form @submit.prevent="submit">
 <input 
 v-model.trim="storeName" 
 type="text" 
 class="form__input btn_common"
 >
 <button class="container__btn btn_common">Set Name</button>
 </form>
 
 
 <h2>{
 { username }}</h2>
 <h2>module count: {
 { count }}</h2>
 <button type="submit" @click="myModuleAction">increment count</button>
 </div>
 </div>
 </template>
 
 <script>
 
 import { mapState, mapActions } from 'vuex'
 
 export default {
 name: 'MyComponent',
 props: {
 myProp: String
 },
 data() {
 return {
 storeName: '',
 name: 'Makanju Emmanuel',
 email: 'makurseme@gmail.com'
 }
 },
 methods: {
 ...mapActions(['actionSetUsername']),
 ...mapActions('mod' , ['incrementCount']),
 sendMessage() {
 this.$emit('message-sent', 'Hello from child!')
 },
 submit(){
 if(this.storeName !== ''){
 this.actionSetUsername(this.storeName)
 } 
 },
 myModuleAction() {
 this.incrementCount(); // Dispatch module action
 }
 
 },
 computed: {
 ...mapState({
 username: state => state.name,
 }),
 count() {
 return this.$store.state.mod.count; // Access module state
 }
 }
 }
 </script>
 
 </code>

总之，在 Vue.js 应用程序中使用 Vuex 模块提供了一种结构化且可扩展的状态管理方法。模块允许您将商店划分为更小的独立单元，从而更容易组织和维护应用程序的状态管理。

[Link 1]: https://zhifj.com
[436d43b8f36e98b258bc783201c260ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/6686af7fae1244df8b356a30bc3eaf22.png
[store]: http://telegeram1.com