详细介绍vue中vuex（详解及实例）-Vue.js-PHP中文网

首页

web前端

Vue.js

详细介绍vue中vuex（详解及实例）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 31, 2021 pm 06:26 PM

vuex

本篇文章给大家带来了vue中vuex的相关知识，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，希望对大家有帮助。

详细介绍vue中vuex（详解及实例）

概念

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

安装

HTML 中使用 script 标签引入

<script src="vue.js"></script>
<script src="vuex.js"></script>

Vue项目中使用 npm 下载安装（需要安装 Node 环境）

// 下载
npm install vuex --save

// 安装
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Vuex 图示

详细介绍vue中vuex（详解及实例）

Vuex 和单纯的全局对象有以下两点不同：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Store

每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

State

驱动应用的数据源，用于保存所有组件的公共数据.。

Getter

可以将 getter 理解为 store 的计算属性, getters 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Mutation

mutations 对象中保存着更改数据的回调函数,该函数名官方规定叫 type, 第一个参数是 state, 第二参数是payload, 也就是自定义的参数。mutation 必须是同步函数。mutations 对象里的方法需要使用 store.commit 调用

Action

Action 提交的是 mutation 而不是直接变更状态。action 可以包含任意异步操作。actions 对象里的方法需要使用 store.dispatch 调用。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

HTML中 vuex 的使用

<body><p id="app">
    <input type="button" value="+" @click="add">
    {{this.$store.state.count}}
    <input type="button" value="-" @click="reduce">
    {{this.$store.getters.synchro}}
    <input type="button" value="改变为10" @click="changeNum"></p><script src="vue.js"></script><script src="vuex.js"></script><script>
    var store = new Vuex.Store({
        state: {
            count: 0
        },
        getters: {
            synchro(state) {
                return state.count            }
        },
        mutations: {   
            increment(state) {
                state.count++
            },
            inreduce(state) {
                state.count--
            },
            inchange(state, num) {
                state.count = num            }
        },
        actions: {
            change(context, num) {
                context.commit('inchange', num)
            }
        }
    })

    new Vue({
        el: '#app',
        store,
        methods: {
            add() {
                this.$store.commit('increment')
            },
            reduce() {
                this.$store.commit('inreduce')
            },
            changeNum() {
                this.$store.dispatch('change', 10)
            }
        }
    })</script></body>

Vue 项目中 vuex 的使用（两种）

把 vuex 写在 main.js 文件里

import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'// 全局状态管理Vue.use(Vuex)Vue.config.productionTip = falsevar store = new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    changeNum(state, num){
      state.num += num    }
  }})new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'})

在组件中调用

<template>
	<p>
		<input type="button" value="改变count的值" @click="change">
    	{{this.$store.state.count}}
	<p></template><script>export default {
	name: '',
	data () {
    	return {
		}
    },
    methods: {
		change() {
			this.$store.commit('changeNum', 10)
		}
	}}</script>

把 vuex 分离出来

在 src 目录下创建一个 vuex 目录，新建 modules 目录和 index.js 文件放到 vuex 目录下
详细介绍vue中vuex（详解及实例）

在 main.js 文件里引入 vuex 目录

import Vue from 'vue'import App from './App'import router from './router'import store from './vuex'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'})

在 index.js 里写上如下代码

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)let modules = {}const requireAllModules = require.context("./", true, /\.js$/)requireAllModules.keys().forEach(key => {
  let module = requireAllModules(key).default
  if (module && module.name && module.namespaced) {
    modules[module.name] = module  }})export default new Vuex.Store({
  modules: modules,
  strict: process.env.NODE_ENV !== "production"})

在 modules 目录下新建 city.js 文件，里面代码如下

export default {
  name: "city",
  namespaced: true,
  state: {
    cityName: '',
    cityCode: ''
  },
  getters: {
    getState(state) {
      return state    },
    getCityCode(state) {
      return state.cityCode    }
  },
  mutations: {
    changeCity(state, cityName) {
      state.cityName = cityName    }
  }}

在组件里设置值

<template>
	<p>
		<ul>
          <li v-for="item in city" @click="handChangeCity(item.name)"></li>
        </ul>
	</p></template><script>import { mapMutations } from 'vuex'   // 引入vuexexport default {
	name: "city",
	data() {
		return {
			city: [
				{ id: 1, name: '北京' }
				{ id: 2, name: '上海' }
				{ id: 3, name: '广州' }
				{ id: 4, name: '深圳' }
				{ id: 5, name: '厦门' }
			]
		}
	},
	methods: {
		// 修改
		...mapMutations({
			changeCity: "city/changeCity"
		}),
		// 第一种写法
		handChangeCity(cityName) {
			this.changeCity(cityName)
		}
		// 第二种写法  不需要使用 ...mapMutations
		handChangeCity(cityName) {
			this.$store.commit('city/changeCity', cityName);
		}
	}}</script>

在另一个组件里使用

<template>
	<p>
		<p>{{getState.cityName}}</p>
		<p>{{getCityCode}}</p>
	</p></template><script>import { mapGetters} from 'vuex'   // 引入vuexexport default {
	data() {
		return {
		}
	},
	computed: {
	    // 第一种使用方法
	    ...mapGetters({
	    	getState: "city/getState"
	    })
	    // 第二种使用方法
	    ...mapGetters('city', ['getState', 'getCityCode'])
  	}}</script>

以上是详细介绍vue中vuex（详解及实例）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：CSDN。如有侵权，请联系admin@php.cn删除

前端景观：Netflix如何处理其选择Apr 15, 2025 am 12:13 AM

Netflix在前端技术上的选择主要集中在性能优化、可扩展性和用户体验三个方面。1.性能优化：Netflix选择React作为主要框架，并开发了SpeedCurve和Boomerang等工具来监控和优化用户体验。2.可扩展性：他们采用微前端架构，将应用拆分为独立模块，提高开发效率和系统扩展性。3.用户体验：Netflix使用Material-UI组件库，通过A/B测试和用户反馈不断优化界面，确保一致性和美观性。

React与Vue：Netflix使用哪个框架？Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkcalled“ Gibbon” BuiltonReact，notReactorVueDirectly.1）TeamExperience：selectBasedAsedonFamiliarity.2）ProjectComplexity：vueforsimplerprojects，vueforsimplerprojects，reactforforforecomplexones.3）cocatizationNeedsneeds：reactofficatizationneedneeds：reactofferizationneedneedneedneeds：reactoffersizatization needeffersefersmoreflexiblesimore.4）ecosyaka

框架的选择：是什么推动了Netflix的决定？Apr 13, 2025 am 12:05 AM

Netflix在框架选择上主要考虑性能、可扩展性、开发效率、生态系统、技术债务和维护成本。1.性能与可扩展性：选择Java和SpringBoot以高效处理海量数据和高并发请求。2.开发效率与生态系统：使用React提升前端开发效率，利用其丰富的生态系统。3.技术债务与维护成本：选择Node.js构建微服务，降低维护成本和技术债务。

反应，vue和Netflix前端的未来Apr 12, 2025 am 12:12 AM

Netflix主要使用React作为前端框架，辅以Vue用于特定功能。1)React的组件化和虚拟DOM提升了Netflix应用的性能和开发效率。2)Vue在Netflix的内部工具和小型项目中应用，其灵活性和易用性是关键。

前端中的vue.js：现实世界的应用程序和示例Apr 11, 2025 am 12:12 AM

Vue.js是一种渐进式JavaScript框架，适用于构建复杂的用户界面。1)其核心概念包括响应式数据、组件化和虚拟DOM。2)实际应用中，可以通过构建Todo应用和集成VueRouter来展示其功能。3)调试时，建议使用VueDevtools和console.log。4)性能优化可通过v-if/v-show、列表渲染优化和异步加载组件等实现。

vue.js和React：了解关键差异Apr 10, 2025 am 09:26 AM

Vue.js适合小型到中型项目，而React更适用于大型、复杂应用。1.Vue.js的响应式系统通过依赖追踪自动更新DOM，易于管理数据变化。2.React采用单向数据流，数据从父组件流向子组件，提供明确的数据流向和易于调试的结构。

vue.js vs.反应：特定于项目的考虑因素Apr 09, 2025 am 12:01 AM

Vue.js适合中小型项目和快速迭代，React适用于大型复杂应用。1)Vue.js易于上手，适用于团队经验不足或项目规模较小的情况。2)React的生态系统更丰富，适合有高性能需求和复杂功能需求的项目。

vue怎么a标签跳转Apr 08, 2025 am 09:24 AM

实现 Vue 中 a 标签跳转的方法包括：HTML 模板中使用 a 标签指定 href 属性。使用 Vue 路由的 router-link 组件。使用 JavaScript 的 this.$router.push() 方法。可通过 query 参数传递参数，并在 router 选项中配置路由以进行动态跳转。

See all articles