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库与其他JS库冲突的解决办法
Feb 07 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 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
PHP 采集程序 常用函数
2008/12/18 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
简单实现js页面切换功能
2021/01/10 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
python安装以及IDE的配置教程
2015/04/29 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
利用python实现周期财务统计可视化
2019/08/25 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
公司会议策划方案
2014/05/17 职场文书
李敖北大演讲稿
2014/05/24 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
警示教育观后感
2015/06/17 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
JavaScript函数柯里化
2021/11/07 Javascript