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

概念

安装

Vuex 图示

HTML中 vuex 的使用

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

首页

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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7569

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

107

显示更多

Related knowledge

在Vue应用中使用vuex时出现“Error: [vuex] do not mutate vuex store state outside mutation handlers.”怎么解决？ Jun 24, 2023 pm 07:04 PM

在Vue应用中，使用vuex是常见的状态管理方式。然而，在使用vuex时，我们有时可能会遇到这样的错误提示：“Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers.”这个错误提示是什么意思呢？为什么会出现这个错误提示？如何解决这个错误？本文将详细介绍这个问题。错误提示的含

在Vue应用中使用vuex时出现“Error: [vuex] unknown action type: xxx”怎么解决？ Jun 25, 2023 pm 12:09 PM

在Vue.js项目中，vuex是一个非常有用的状态管理工具。它可以帮助我们在多个组件之间共享状态，并提供了一种可靠的方式来管理状态的变化。但在使用vuex时，有时会遇到“Error:[vuex]unknownactiontype:xxx”的错误。这篇文章将介绍该错误的原因及解决方法。1.错误原因在使用vuex时，我们需要定义一些actions和mu

Vue2.x中使用Vuex管理全局状态的最佳实践 Jun 09, 2023 pm 04:07 PM

Vue2.x是目前最流行的前端框架之一，它提供了Vuex作为管理全局状态的解决方案。使用Vuex能够使得状态管理更加清晰、易于维护，下面将介绍Vuex的最佳实践，帮助开发者更好地使用Vuex以及提高代码质量。1.使用模块化组织状态Vuex使用单一状态树管理应用的全部状态，将状态从组件中抽离出来，使得状态管理更加清晰易懂。在具有较多状态的应用中，必须使用模块

Vue3中Vuex怎么使用 May 14, 2023 pm 08:28 PM

Vuex是做什么的？Vue官方：状态管理工具状态管理是什么?需要在多个组件中共享的状态、且是响应式的、一个变，全都改变。例如一些全局要用的的状态信息：用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工具来进行全局的状态管理，Vuex就是这样的一个工具。单页面的状态管理View–>Actions—>State视图层(view)触发操作(action)更改状态(state)响应回视图层(view)vuex（Vue3.

深入了解vuex的实现原理 Mar 20, 2023 pm 06:14 PM

当面试被问vuex的实现原理，你要怎么回答？下面本篇文章就来带大家深入了解一下vuex的实现原理，希望对大家有所帮助！

在Vue应用中使用vuex时出现'TypeError: Cannot read property 'xxx' of undefined”怎么解决？ Aug 18, 2023 pm 09:24 PM

在Vue应用中使用Vuex是非常常见的操作。然而，偶尔在使用Vuex时会遇到错误信息“TypeError:Cannotreadproperty'xxx'ofundefined”，这个错误信息的意思是无法读取undefined的属性“xxx”，导致了程序的错误。这个问题其实产生的原因很明显，就是因为在调用Vuex的某个属性的时候，这个属性没有被正确

vue3 vite中如何使用vuex Jun 03, 2023 am 09:10 AM

具体步骤：1、安装vuex(vue3建议4.0 )pnpmivuex-S2、main.js中配置importstorefrom'@/store'//hx-app的全局配置constapp=createApp(App)app.use(store)3、新建相关的文件夹与文件，这里配置多个不同vuex内部的js，使用vuex的modules来放不同的页面，文件，然后统一使用一个getters.jsindex.js核心文件，这里使用了import.meta.glob，而不

Vue中如何使用vuex进行组件通讯？ Jul 19, 2023 pm 06:16 PM

Vue中如何使用vuex进行组件通讯？Vue是一款流行的JavaScript框架，它采用组件化的开发模式，使得我们能够更方便地构建复杂的应用程序。在Vue的组件化开发过程中，经常会遇到需要不同组件之间进行通信的情况。Vuex是Vue官方推荐的状态管理工具，提供了一个集中式的存储管理器，解决了组件之间通信的问题。本文将介绍如何在Vue中使用Vuex进行组件通信

See all articles

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

概念

安装

Vuex 图示

HTML中 vuex 的使用

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题