Vue 中如何模块化使用 Vuex

简介: Vue 中如何模块化使用 Vuex

在 Vue 中使用 Vuex 进行模块化管理状态非常简单,以下是一个基本的代码示例:

在 main.js 中引入 Vuex:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建 store
const store = new Vuex.Store({
  // 定义状态
  state: {
    count: 0
  },
  // 定义 mutations
  mutations: {
    increment(state) {
      state.count++
    }
  },
  // 定义 actions
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  // 定义 getters
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})
// 将 store 注入到 Vue 实例中
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

然后在组件中使用 Vuex:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    // 将 Vuex 的 state 映射为组件的计算属性
    ...mapState(['count']),
    // 将 Vuex 的 getters 映射为组件的计算属性
    ...mapGetters(['doubleCount'])
  },
  methods: {
    // 将 Vuex 的 actions 映射为组件的方法
    ...mapActions(['increment'])
  }
}
</script>

这样就可以在组件中通过 count 获取状态值,通过 doubleCount 获取计算属性值,并通过 increment 方法触发 mutation 来修改状态。

相关文章
|
2天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
19 3
|
1天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
2天前
|
JavaScript
【vue】vue2 获取本地IP地址
【vue】vue2 获取本地IP地址
8 1
|
2天前
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
12 1
|
2天前
|
JavaScript 前端开发
|
2天前
|
JavaScript
vue 组件注册
vue 组件注册
|
2天前
|
JavaScript 前端开发 开发者
|
前端开发 JavaScript API
【mock】后端不来过夜半,闲敲mock落灯花 (mockjs+Vuex+Vue实战)
mock的由来【假】   赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单的数据接口文档的赵师秀慨叹一声:"好吧,那还是我自己先模拟一下后端的接口吧"   _(:...
1507 0
|
2天前
|
JavaScript 前端开发 UED
Vue:为什么要使用v-cloak
Vue:为什么要使用v-cloak
|
2天前
|
JavaScript API
vue 侦听器
vue 侦听器