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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
Vue 自定义动态组件实例详解
Mar 28 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
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 301转向实现代码
2008/09/18 PHP
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
原生js生成图片验证码
2020/10/11 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
python导入模块交叉引用的方法
2019/01/19 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python文件操作方法详解
2020/02/09 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
高一学生评语大全
2014/04/25 职场文书
医药销售自我评价200字
2014/09/11 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
redis 查看所有的key方式
2021/05/07 Redis
Python django中如何使用restful框架
2021/06/23 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers