Vue组件学习 | 二、Vuex组件

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。以下是 Vuex 的基本用法

Vuex 基本用法

安装 Vuex

首先,你需要安装 Vuex。如果你使用的是 npm,可以使用以下命令:

bash 复制代码
npm install vuex --save

创建 Vuex Store

创建一个新的 Vuex store 实例,它将包含所有状态(state)、改变状态的方法(mutations)和获取状态的函数(getters)。

javascript 复制代码
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

在 Vue 组件中使用 Vuex Store

你可以在 Vue 组件中使用 mapStatemapGettersmapActionsmapMutations 辅助函数来使用 Vuex store。

vue 复制代码
<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

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

Vuex 模块

Vuex 允许你将 store 分割成模块,每个模块拥有自己的 state、mutations、actions、getters,甚至是嵌套子模块。

javascript 复制代码
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

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

Vuex 严格模式

Vuex 允许你以严格模式运行,这在开发过程中非常有用,因为它会阻止你对状态的直接更改。

javascript 复制代码
const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

Vuex 插件

Vuex 允许你使用插件来扩展 store 的功能。插件可以监听 Vuex store 的 mutation 并响应它们。

javascript 复制代码
const myPlugin = store => {
  store.subscribe((mutation, state) => {
    // 调用 API 或者其他响应
  })
}

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

以上就是 Vuex 的基本用法。

你可以在 Vuex 官方文档 中找到更多高级用法和配置选项。

相关推荐
Monly212 分钟前
JS:JSON操作
前端·javascript·json
致奋斗的我们3 分钟前
RHCE的学习(7)
linux·服务器·网络·学习·redhat·rhce·rhcsa
20岁30年经验的码农9 分钟前
爬虫基础
1024程序员节
licy__29 分钟前
计算机网络IP地址分类,子网掩码,子网划分复习资料
1024程序员节
小何学计算机1 小时前
Nginx 配置基于主机名的 Web 服务器
服务器·前端·nginx
Chris-zz1 小时前
Linux:磁盘深潜:探索文件系统、连接之道与库的奥秘
linux·网络·c++·1024程序员节
web_code1 小时前
vite依赖预构建(源码分析)
前端·面试·vite
觉醒法师1 小时前
HarmonyOS开发 - 本地持久化之实现LocalStorage支持多实例
前端·javascript·华为·typescript·harmonyos
JasonYin~1 小时前
《探索 HarmonyOS NEXT(5.0):开启构建模块化项目架构奇幻之旅 —— 模块化基础篇》
1024程序员节