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 相关文章推荐
JQuery 操作select标签实现代码
May 14 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
js创建元素(节点)示例
Jan 02 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
python进程与线程小结实例分析
2018/11/11 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
Js获取图片原始宽高的实现代码
2016/05/17 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
python发送伪造的arp请求
2014/01/09 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
python3安装crypto出错及解决方法
2019/07/30 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
毕业生自我鉴定
2013/11/05 职场文书
仓管员岗位责任制
2014/02/19 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
SQL Server删除表中的重复数据
2022/05/25 SQL Server