search
HomeWeb Front-endJS TutorialIntroduction to project structure and configuration of vuex

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.

FileDirectory structure

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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Vue2.x中使用Vuex管理全局状态的最佳实践Vue2.x中使用Vuex管理全局状态的最佳实践Jun 09, 2023 pm 04:07 PM

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

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

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.”怎么解决?在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”怎么解决?在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

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

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

Java语言中的数学模型介绍Java语言中的数学模型介绍Jun 10, 2023 am 11:57 AM

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

在Vue应用中使用vuex时出现“TypeError: Cannot read property 'xxx' of undefined”怎么解决?在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中如何使用vuexvue3+vite中如何使用vuexJun 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,而不

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)