The five attributes of vuex are: 1. The state attribute is used to store variables; 2. The getters attribute is equivalent to the calculated attribute of state; 3. The mutations attribute is used to submit update data; 4. The actions attribute ;5. Modules attribute, used for modular vuex.
Recommended: "vue tutorial"
The five attributes and basic usage of vuex in vue
VueX is a state management framework specially designed for Vue.js applications. It uniformly manages and maintains the changeable state of each vue component (you can understand it as some data in the vue component).
Vuex has five core concepts:
state
,getters
,mutations
,actions
,modules
.
1. state: basic data of vuex, used to store variables
2. geeter: data derived from basic data (state), equivalent to the calculated attributes of state
3. Mutation: The method to submit updated data must be synchronous (if you need to use action asynchronously). Each mutation has a string event type (type) and a callback function (handler).
The callback function is where we actually change the state, and it will accept state as the first parameter and submit the payload as the second parameter.
4. Action: The function is roughly the same as mutation. The difference is ==》1. Action submits a mutation instead of directly changing the state. 2. Action can contain any asynchronous operation.
5. Modules: Modular vuex allows each module to have its own state, mutation, action, and getters, making the structure very clear and easy to manage.
Usage of Vuex:
Create a new vue project testApp ==》Build a store file in testApp==》Under the store file there are modules folder and getter.js and index.js == 》Build user.js under the store file
Introduce it into the main.js of the project import store from './store'
Introduce it into the index.js under the store file
import Vue from 'vue' import Vuex from 'vuex' import user from './modules/user' import global from './modules/global' import getters from './getters' Vue.use(Vuex) const store = new Vuex.Store({ modules: { user }, getters }) export default store 在store文件下的getters.js中引入 const getters = { self: state => state.user.self, token: state => state.user.token, currentCommunity: (state, getters) => { let cid = getters.currentCommunityId return getters.communities.filter(item => { return item.communityId === cid }) } } export default getters 在modules文件下的user.js写代码 const user = { state:{ self: null, token: '', }, mutations:{ SET_SELF: (state, self) => { state.self = self }, SET_TOKEN: (state, token) => { state.token = token } }, actions:{ login ({ commit }, res) { commit('SET_SELF', res.self) commit('SET_TOKEN', res.token } } export default user
Use the following two methods to store data:
dispatch:异步操作,写法: this.$store.dispatch('mutations方法名',值) commit:同步操作,写法:this.$store.commit('mutations方法名',值)
The above is the detailed content of What are the five attributes of vuex. For more information, please follow other related articles on the PHP Chinese website!
![在Vue应用中使用vuex时出现“Error: [vuex] do not mutate vuex store state outside mutation handlers.”怎么解决?](https://img.php.cn/upload/article/000/000/164/168760467048976.jpg)
在Vue应用中,使用vuex是常见的状态管理方式。然而,在使用vuex时,我们有时可能会遇到这样的错误提示:“Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers.”这个错误提示是什么意思呢?为什么会出现这个错误提示?如何解决这个错误?本文将详细介绍这个问题。错误提示的含

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

Vuex是做什么的?Vue官方:状态管理工具状态管理是什么?需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工具来进行全局的状态管理,Vuex就是这样的一个工具。单页面的状态管理View–>Actions—>State视图层(view)触发操作(action)更改状态(state)响应回视图层(view)vuex(Vue3.
![在Vue应用中使用vuex时出现“Error: [vuex] unknown action type: xxx”怎么解决?](https://img.php.cn/upload/article/000/887/227/168766615217161.jpg)
在Vue.js项目中,vuex是一个非常有用的状态管理工具。它可以帮助我们在多个组件之间共享状态,并提供了一种可靠的方式来管理状态的变化。但在使用vuex时,有时会遇到“Error:[vuex]unknownactiontype:xxx”的错误。这篇文章将介绍该错误的原因及解决方法。1.错误原因在使用vuex时,我们需要定义一些actions和mu

在Vue应用的开发过程中,使用vuex来管理应用状态是非常常见的做法。然而,在使用vuex的过程中,有时我们可能会遇到这样的错误提示:“Error:'xxx'hasalreadybeendeclaredasadataproperty.”这个错误提示看起来很莫名其妙,但其实是由于在Vue组件中,使用了重复的变量名来定义data属性和vuex

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

具体步骤: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,而不


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SublimeText3 Mac version
God-level code editing software (SublimeText3)

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
