vuex 项目结构目录及一些简单配置介绍


Posted in Javascript onApril 08, 2018

首先先正经的来一段官网的"忠告":

vuex需要遵守的规则:

一、应用层级的状态应该集中到单个 store 对象中。

二、提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。

三、异步逻辑都应该封装到 action 里面。

文件目录结构

vuex 项目结构目录及一些简单配置介绍

文件之间的关系:

store文件夹 - 存放vuex的系列文件

store.js - 引入vuex,设置state状态数据,引入getter、mutation和action

getter.js - 获取store内的状态

mutation.js - 更改store中状态用的函数的存储之地

action.js - 提交mutation以达到委婉地修改state状态,可异步操作

简单而又普通的写法

store.js文件:

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
})

main.js文件中(从根组件注入store,就像注入router一样):

通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到。

import store from './store/index'
new Vue({
 el: '#app',
 router,
 store,
 ...
})

Getter.js 的简单配置( store 的计算属性,接受state为参数)

export default {
  doneTodos: state = >{
   return state.todos.filter(todo = >todo.done)
  }
}

获取(某组件的计算属性内部):

computed: {
 doneTodosCount () { 
  return this.$store.getters.doneTodosCount 
 }
}

可传参 的getter属性的简单配置

export default{

 getTodoById: (state) => (id) => { 
  return state.todos.find(todo => todo.id === id) 
 }
}

获取(某 组件的计算属性内部 ):

computed: {
 getTodoById() { 
  return this.$store.getters.getTodoById(‘参数')
 }
}

mutation.js简单配置:

export default {
  increment(state) {
   //变更状态
   state.count++
  }
}

触发(组件中)

this.$store.commit(state,payload)
actions.js简单配置:
export default{
 action (context) {
 //异步操作
  setTimeout(()=>{
   //变更状态
   context.commit('mutationFunName',value)
  })
 }
}

触发(组件的)

this.$store.dispatch('mutationFunctionName')
2018-04-07 18:13:34

总结

以上所述是小编给大家介绍的vuex 项目结构目录及一些简单配置介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
js实现div在页面拖动效果
May 04 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
JS求Number类型数组中最大元素方法
Apr 08 #Javascript
angular2模块和共享模块详解
Apr 08 #Javascript
vue下拉列表功能实例代码
Apr 08 #Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 #Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 #Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 #Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 #Javascript
You might like
PHP中的正则表达式函数介绍
2012/02/27 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
python操作kafka实践的示例代码
2019/06/19 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
写给女朋友的道歉信
2014/01/08 职场文书
企业宣传方案
2014/03/04 职场文书
简单的项目建议书模板
2014/03/12 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
小学远程教育工作总结
2015/08/13 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android