This time I will bring you an introduction to the project structure and configuration of vuex. What are the precautions when using the vuex project structure and configuration? The following is a practical case, let's take a look.
First of all, here is a serious piece of "advice" from the official website:
Rules that vuex needs to abide by:
1. Application-level status should be concentrated into a single store object.
2. Submitting a mutation is the only way to change the state, and this process is synchronous.
3. All asynchronous logic should be encapsulated in action.
Relationship between files:
store folder - stores vuex series files
store.js - introduce vuex, set state data, introduce getter, mutation and action
getter.js - Get the status in the store
mutation.js - where functions used to change the state in the store are stored
action.js - Submit mutation to modify the state tactfully, and can operate asynchronously
Simple and common way of writing
store.js file:
import Vue from 'vue' import Vuex from 'vuex' import actions from './actions' import mutations from './mutations' Vue.use(Vuex) const state = { a: '初始值', b: 'balabala...' } export default new Vuex.Store({ state, actions, mutations })
In the main.js file (inject the store from the root component, just like injecting the router):
By registering the store option in the root instance, the store instance will be injected into all child components under the root component, and the child components can be accessed through this.$store.
import store from './store/index' new Vue({ el: '#app', router, store, ... })
Simple configuration of Getter.js (store's calculated property, accepts state as parameter)
export default { doneTodos: state = >{ return state.todos.filter(todo = >todo.done) } }
Get (inside the calculated property of a component):
computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } }
Simple configuration of getter properties that can pass parameters
export default{ getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } }
Get (inside the calculated property of a certain component):
computed: { getTodoById() { return this.$store.getters.getTodoById(‘参数') } }
mutation.js simple configuration:
export default { increment(state) { //变更状态 state.count++ } }
Trigger (in component)
this.$store.commit(state,payload) actions.js简单配置: export default{ action (context) { //异步操作 setTimeout(()=>{ //变更状态 context.commit('mutationFunName',value) }) } }
Trigger (component)
this.$store.dispatch('mutationFunctionName') 2018-04-07 18:13:34
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
What are the new features of vue-cli 3.0.x after upgrading to webpack4
How to implement JS Deduplication algorithm within JSON array
The above is the detailed content of Introduction to project structure and configuration of vuex. For more information, please follow other related articles on the PHP Chinese website!

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

Vuex是做什么的?Vue官方:状态管理工具状态管理是什么?需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工具来进行全局的状态管理,Vuex就是这样的一个工具。单页面的状态管理View–>Actions—>State视图层(view)触发操作(action)更改状态(state)响应回视图层(view)vuex(Vue3.
![在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.”这个错误提示是什么意思呢?为什么会出现这个错误提示?如何解决这个错误?本文将详细介绍这个问题。错误提示的含
![在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

Java语言是一种高级编程语言,非常适合用于数学模型的构建和分析。数学模型是数学概念在现实世界中的应用,它们通常用于解决实际问题,例如预测未来趋势、优化生产和制造等。本文将介绍Java语言中常见的数学模型及其应用。线性规划线性规划是一种优化方法,在解决企业最优决策、资源配置以及生产计划等问题中广泛应用。在Java语言中,可以使用ApacheCommons

在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

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

WebStorm Mac version
Useful JavaScript development tools

Dreamweaver CS6
Visual web development tools

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