


This article mainly introduces the vuex project structure directory and some simple configurations. Friends in need can refer to it
First of all, here is a serious "advice" from the official website:
Rules that vuex needs to follow:
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 into action.
File directory 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 - Used to change the status in the store The place where functions are stored
action.js - Submit mutations to modify the state tactfully, and can operate asynchronously
Simple and ordinary writing method
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 in the root instance Register the store option. The store instance will be injected into all sub-components under the root component, and the sub-components can be accessed through this.$store.
import store from './store/index' new Vue({ el: '#app', router, store, ... })
Simple configuration of Getter.js (calculated property of store, accepting 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 the getter property that can pass parameters
export default{ getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } }
Get (internal calculated properties of a 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 (in component)
this.$store.dispatch('mutationFunctionName') 2018-04-07 18:13:34
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Ajax image upload based on firefox
Ajax non-refresh paging performance optimization method
Ajax loading external page pop-up layer effect implementation method
The above is the detailed content of Vuex project structure directory and some simple configuration introduction. For more information, please follow other related articles on the PHP Chinese website!

linux查看目录是否为空的方法:1、进入linux终端;2、通过执行“res=`ls -A $dir` if [ -z $res ];then echo "$dir ..."else echo "$dir ..."fi”方法判断目录是否为空即可。
![在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.”这个错误提示是什么意思呢?为什么会出现这个错误提示?如何解决这个错误?本文将详细介绍这个问题。错误提示的含

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

Vue2.x是目前最流行的前端框架之一,它提供了Vuex作为管理全局状态的解决方案。使用Vuex能够使得状态管理更加清晰、易于维护,下面将介绍Vuex的最佳实践,帮助开发者更好地使用Vuex以及提高代码质量。1.使用模块化组织状态Vuex使用单一状态树管理应用的全部状态,将状态从组件中抽离出来,使得状态管理更加清晰易懂。在具有较多状态的应用中,必须使用模块
![在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时会遇到错误信息“TypeError:Cannotreadproperty'xxx'ofundefined”,这个错误信息的意思是无法读取undefined的属性“xxx”,导致了程序的错误。这个问题其实产生的原因很明显,就是因为在调用Vuex的某个属性的时候,这个属性没有被正确

linux查看目录占用空间大小的方法:1、使用“du -h --max-depth=0”命令查看当前目录使用的总空间大小;2、使用“du -h --max-depth=1”命令查看当前目录下某文件使用空间大小。


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

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 English version
Recommended: Win version, supports code prompts!

Dreamweaver CS6
Visual web development tools

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