首页手记 Vuex4入门教程：轻松掌握Vue状态管理

Vuex4入门教程：轻松掌握Vue状态管理

标签：

vuex

概述

本文介绍了Vuex4作为Vue.js应用程序的状态管理库，解释了其核心概念和新特性，包括更好的TypeScript支持和模块化增强。此外，文章还详细说明了如何安装和配置Vuex4，并介绍了基本概念如State、Getter、Mutation、Action和Module。

Vuex4简介

什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理库。它采用集中式存储管理应用的所有组件中的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 的核心理念是将状态集中管理，通过突变（mutations）来改变状态，从而使得状态的变更更加可控和易于追踪。

Vuex4的新特性

在 Vuex 4 中，核心概念和设计基本保持不变，但引入了一些新特性和改进，以提高开发人员的开发体验。这些新特性包括：

更好的 TypeScript 支持：Vuex 4 对 TypeScript 的支持更加完善，使得类型定义和类型检查更加方便。
模块化增强：增强了模块化的支持，使得开发大型项目时更加灵活。
更简单的 API：API 更加简洁和易用，减少了不必要的复杂性。
内置插件：一些常用的插件被内置到 Vuex 中，使得开发过程更加便捷。

安装与配置Vuex4

创建Vuex4项目

要创建一个新的 Vue 项目并使用 Vuex 4，可以按照以下步骤操作。首先，确保你已经安装了 Node.js 和 Vue CLI。如果还没有安装，可以通过以下命令安装 Vue CLI：

npm install -g @vue/cli

接下来，通过 Vue CLI 创建一个新的 Vue 项目：

vue create my-vue-app

选择默认配置或自定义配置来创建项目。进入项目目录：

cd my-vue-app

安装Vuex4

要在项目中安装 Vuex 4，可以使用 npm 或 yarn。如果使用 npm：

npm install vuex@next --save

如果使用 yarn：

yarn add vuex@next

安装完成后，可以通过运行以下命令检查是否安装成功：

npm list vuex

或

yarn list vuex

配置store

在项目的 src 目录下，通常会有一个 store 文件夹来存放 Vuex store 的配置文件。如果没有 store 文件夹，可以手动创建一个：

mkdir src/store

然后在 src/store 目录下创建一个 index.js 文件，用于配置 store。下面是一个简单的 store 配置示例：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0,
    userInfo: {
      name: 'John Doe',
      age: 28
    }
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement({ commit }) {
      commit('decrement')
    },
    fetchUserInfo({ commit }) {
      setTimeout(() => {
        commit('SET_USER_INFO', { name: 'Jane Doe', age: 30 })
      }, 1000)
    }
  },
  getters: {
    count: (state) => state.count,
    doubleCount: (state) => state.count * 2,
    userInfo: (state) => state.userInfo
  }
})

在 main.js 或 main.ts 文件中，需要引入并使用上面配置的 store：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

通过以上步骤，你已经成功安装并配置了 Vuex 4。

基本概念讲解

State

State 是 Vuex 中的核心概念，用于存储应用的所有共享状态。这些状态可以被组件访问，但只能通过 Vuex 提供的方法进行变更。下面是一个 State 的示例：

state: {
  count: 0,
  userInfo: {
    name: 'John Doe',
    age: 28
  }
}

Getter

Getter 用于从 Vuex store 中获取状态。Getter 支持计算状态，可以基于其他状态进行计算。下面是一个 Getter 的示例：

getters: {
  count: (state) => state.count,
  doubleCount: (state) => state.count * 2,
  userInfo: (state) => state.userInfo
}

Mutation

Mutation 是唯一允许变更 store 状态的方法。每个 mutation 都有一个字符串的类型（type）字段和一个回调函数（handler），这个回调函数会接收状态对象作为第一个参数。下面是一个 Mutation 的示例：

mutations: {
  INCREMENT(state) {
    state.count++
  },
  DECREMENT(state) {
    state.count--
  },
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo
  }
}

Action

Action 用于处理异步操作。Action 接收一个与 store 实例具有相同方法和属性的 context 对象，可以通过 context.commit 来提交一个 mutation。下面是一个 Action 的示例：

actions: {
  increment({ commit }) {
    commit('INCREMENT')
  },
  decrement({ commit }) {
    commit('DECREMENT')
  },
  fetchUserInfo({ commit }) {
    setTimeout(() => {
      commit('SET_USER_INFO', { name: 'Jane Doe', age: 30 })
    }, 1000)
  }
}

Module

Module 是 Vuex 的模块化开发方式，用于将 Vuex store 分解为多个小模块。每个模块都有自己的 state、mutation、actions 和 getters。下面是一个模块的示例：

const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
}

const moduleB = {
  state: {
    name: 'John Doe'
  },
  mutations: {
    setName(state, name) {
      state.name = name
    }
  },
  actions: {
    setName({ commit }, name) {
      commit('setName', name)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

实践操作：创建简单的状态管理应用

使用State存储数据

在 Vuex 中，State 用于存储应用的状态。为了演示如何使用 State 存储数据，我们创建一个简单的计数器应用。首先，在 store/index.js 中定义 State：

state: {
  count: 0
}

然后在组件中访问这个 State：

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  }
}
</script>

使用Mutation修改状态

Mutation 是唯一允许变更 Vuex store 状态的方法。下面我们在 store/index.js 中定义一个 Mutation：

mutations: {
  INCREMENT(state) {
    state.count++
  },
  DECREMENT(state) {
    state.count--
  },
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo
  }
}

然后在组件中调用 Mutation：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['INCREMENT', 'DECREMENT'])
  }
}
</script>

使用Getter获取数据

Getter 用于从 Vuex store 中获取状态，支持计算状态。下面我们在 store/index.js 中定义一个 Getter：

getters: {
  doubleCount: (state) => state.count * 2
}

然后在组件中使用 Getter：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  }
}
</script>

使用Action处理异步操作

Action 用于处理异步操作。Action 接收一个与 store 实例具有相同方法和属性的 context 对象，可以通过 context.commit 来提交一个 mutation。下面我们在 store/index.js 中定义一个 Action：

actions: {
  fetchInfo({ commit }) {
    setTimeout(() => {
      commit('SET_INFO', { name: 'John Doe', age: 28 })
    }, 1000)
  }
}

然后在组件中调用 Action：

<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
    <button @click="fetchInfo">Fetch Info</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['name', 'age'])
  },
  methods: {
    ...mapActions(['fetchInfo'])
  }
}
</script>

应用模块化开发

我们可以通过模块化开发来组织 Vuex store。下面是一个模块化的示例：

const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
}

const moduleB = {
  state: {
    name: 'John Doe'
  },
  mutations: {
    setName(state, name) {
      state.name = name
    }
  },
  actions: {
    setName({ commit }, name) {
      commit('setName', name)
    }
  }
}

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

在组件中使用模块化的 state 和 action：

<template>
  <div>
    <p>Count: {{ moduleA.count }}</p>
    <button @click="increment">Increment</button>
    <p>Name: {{ moduleB.name }}</p>
    <button @click="setName">Set Name</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('moduleA', ['count']),
    ...mapState('moduleB', ['name'])
  },
  methods: {
    ...mapActions('moduleA', ['increment']),
    ...mapActions('moduleB', ['setName'])
  }
}
</script>

Vuex4中的高级特性

插件机制

Vuex 插件机制允许你扩展 Vuex 的功能。插件是一种具有 install 方法的对象，可以订阅 store 的状态变更，并在合适的时候执行特定的操作。下面是一个简单的插件示例：

const logger = (store) => {
  store.subscribe((mutation, state) => {
    console.log('mutation.type:', mutation.type)
    console.log('mutation.payload:', mutation.payload)
    console.log('new state:', state)
  })
}

const store = new Vuex.Store({
  plugins: [logger]
})

在实际项目中，你可以在 store 的配置中添加一个插件，例如：

import { createStore } from 'vuex'
import createLogger from 'vuex/dist/logger'

const store = createStore({
  plugins: [createLogger()]
})

模块化开发

模块化开发是 Vuex 中的一个重要特性。通过模块化开发，可以将 Vuex store 分解为多个小模块，每个模块有自己的 state、mutation、actions 和 getters。这样可以更好地组织代码，使得应用更加清晰和易于维护。

状态持久化

状态持久化是指在应用关闭时，将状态存储到本地存储（如 localStorage 或 sessionStorage），当应用重新启动时，再从本地存储中恢复状态。Vuex 提供了 vuex-persistedstate 插件来实现状态持久化功能。

首先，安装 vuex-persistedstate：

npm install vuex-persistedstate

然后在 store/index.js 中配置状态持久化：

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  plugins: [createPersistedState()]
})

在实际项目中，你可以配置持久化存储的详细代码示例，例如：

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  plugins: [createPersistedState({
    // 存储到 localStorage
    storage: window.localStorage
  })]
})

通过以上介绍，你已经掌握了 Vuex 4 的基本概念和高级特性，并了解了如何在实际项目中使用这些功能。希望这些知识能帮助你更好地管理和维护 Vue 应用的状态。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

墨色风雨

手记
篇

粉丝

75

获赞与收藏

351

关注作者，订阅最新文章

阅读免费教程

Vue 入门教程

39个小节 173131 1623

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空