vue项目结构php写哪里,怎样使用vuex项目结构目录与配置
这次给大家带来怎样使用vuex项目结构目录与配置,使用vuex项目结构目录与配置的注意事项有哪些,下面就是实战案例,一起来看一下。
vuex需要遵守的规则:
一、应用层级的状态应该集中到单个 store 对象中。
二、提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
三、异步逻辑都应该封装到 action 里面。
文件目录结构
文件之间的关系:
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
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
vue项目结构php写哪里,怎样使用vuex项目结构目录与配置相关推荐
- 项目经历怎么写_简历里的项目经历怎么写才能打动招生官和面试官?
机器学习课程上新 扫码添加小助手, 了解最新机器学习内容 咨询最热硅谷机器学习课程 申请季到了, 文书背景空空心急如焚? 求职季实习季到了, 简历如何凸显自己的专业背景硬实力? 啊,怎么办 不多说,先 ...
- 项目经历怎么写_工作经历、项目经验怎么写?
想得到专业面试攻略吗?想早日成为职场达人吗?小工老师来助力你! 简历中最有价值含量的内容,毋庸置疑就是工作经历和项目经验了.通过这部分内容,就可以看出候选人的大致能力,也是面试官最关注的地方,觉得面试 ...
- 关于mysql项目经验怎么写_数据库管理员岗位项目经历怎么写
项目经历(案例一) 项目时间:2017-04到2014-04 项目名称:ORACLE数据库性能调优 项目描述: 项目介绍 根据数据库指定的快照策略,生成STATSPACK报告或者AWR报告,进行数据分 ...
- python工程师简历项目经验怎么写_简历上的项目经历怎么写 ?这 3 条原则不可忽视 !...
阅读本文大概需要 5 分钟. 作者:黄小斜 作为一个程序员,想必大家曾经都做过一些项目,可能现在手头上也还有一些项目. 不过还是有很多学生朋友来问我"没有项目怎么办",诚然,确实有 ...
- java项目经验怎么写_模具工简历项目经验怎么写
项目经验(案例一) 项目时间:2015-04 - 2015-05 项目名称:活动策划 项目描述: 项目介绍 通过策划一系列的活动来提高家具店的知名度,从而拔高家具店正式开业后的销售额. 我的职责 协助 ...
- 简历javaweb项目描述怎么写_硬件工程师简历-项目经验怎么写【范文】
硬件工程师简历模板下载-项目经验范文 [网盘下载]100+清新大气简历模板下载: https://zhuanlan.zhihu.com/p/115911695 https://zhuanlan.zhi ...
- 设计方法:怎么写出优雅的 Go 项目?
前言 Go 语言简单易学,对于大部分开发者来说,编写可运行的代码并不是一件难事,但如果想真正成为 Go 编程高手,你需要花很多精力去研究 Go 的编程哲学. 在我的开发生涯中,我见过各种各样的代码问题 ...
- 【Android项目实战 | 从零开始写app(十二)】实现app首页智慧服务热门推荐热门主题、新闻
说在前面,由于各种adapter,xml布局,bean实体类,Activity,也为了让看懂,代码基本都是"简单粗暴直接不好看",没啥okhttp和util工具类之类的封装,本篇幅 ...
- 【Android项目实战 | 从零开始写app (六) 】用TabLayout+ViewPager搭建App 框架主页面底部导航栏
本篇实现效果: 搭建app框架的方式有很多,本节主要用TabLayout+ViewPager搭建App框架,这种方式简单易实现,在主页中加载Fragment碎片,实现不同功能页面的切换效果图如下: 文 ...
最新文章
- 文件属性及资源文件的使用
- java double框架简介
- arrays中copyof复制两个数组_异或的魅力!图解「数组中两个数的最大异或值」
- h5 神策埋点_咕咚技术总监唐平麟:神策使我们的数据平台成本降低约 75%,迭代效率提升 2~3 倍...
- 局域网linux唤醒windows,局域网唤醒 (WOL - Wake on LAN) | 远程启动计算机- ManageEngine OpUtils...
- java离线数据处理_DATAX 异构数据源离线同步工具
- galera cluster数据备份
- “卖键盘的被键盘侠喷了” | 社交网络的戾气怎么这么重
- VB调用周立功CAN接口卡接口库函数
- Linux 档案属性与目录配置
- 书籍之 Head First HTML与CSS
- python谐音梗_谐 音 梗 生 成 器
- 人脸识别相机对人脸库进行增删改查——MQTT协议
- IOS-简单的自建ipa在线安装服务
- 计算 m 的 n 次幂
- 王欣复出后的第一款产品
- c语言和vb哪个好,请问计算机二级考试我是考c语言好还是考VB好
- Unity3D Shader基础教程
- 使用POI 导出word模板文件
- 懒惰的苏珊 UVa1620
热门文章
- 16. Zuul 源码讲解
- Preprocessor Symbols设置错误导致异常报错error: redefinition of enumerator
- python机器学习之门之sklearn的使用(使用鸢尾花数据集)
- ES6总结——let、const
- 198. 打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报
- 第四讲——李群和李代数
- Skype开始支持微软账号与Skype账号的解绑定
- vue 报表下钻功能开发
- 使用 Hexo 搭建个人博客
- iOS8.1.1 手机图片变形问题