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
vuex - 项目结构目录及一些简单配置的更多相关文章
- day23单例模式 , 日志处理 , 项目结构目录
# day23笔记 ## 一.补充,作业 ### 1.字符串格式化 ```pythonmsg = "我是%(n1)s,年龄%(n2)s" % {'n1': 'alex', 'n2' ...
- ReactNative项目结构目录详解
在使用 react-native init TestProject 在新建项目时,会看到如下目录 React Native结构目录 名称 描述 android目录 Android项目目录,包含了使用A ...
- 读懂Android项目结构目录
我们看到下图:当我们创建了第一Android项目的时候有没有被吓到.怎么这么多目录,好头晕啊!没事, 那我们今天就了解一下这些目录是做什么的: src: src 目录是放置我们所有 Java 代码的地 ...
- eclipse项目结构目录
文章:eclipse web 项目目录结构 地址:https://blog.csdn.net/Alan_Wdd/article/details/90514928 eclipse web 项目目录结构 ...
- intellij idea - Project Structure 项目结构详解(简单明了)
IDEA Project Structure 设置 可以点击 按钮,或者使用快捷键 Ctrl + Shift + Alt + S 打开 Project Structure .如下如所示: 项目的左 ...
- Android项目结构 以及体系结构
学习Android平台的人一般对Android的平台的应该有点认识 其它的就不多讲了 Android项目一般由以下几个部分构成 以上是一个简单的Android项目结构目录图 1. src 主要是 源 ...
- Flask项目示例目录
Flask不同于Django,Django在创建程序时自动得到必要的目录文件,而Flask则只有一个空文件夹,所以关于Flask项目的目录我们需要自行配置. 首先利用pycharm创建一个项目,在根目 ...
- Maven项目的目录结构+maven的安装与配置
1.首先下载maven,然后配置环境变量,在MyEclipse里面配置maven 2.配置maven的pom.xml文件 3.下载和更新资源 右击项目,有一个Maven4Myeclipse,里面有三个 ...
- vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版
vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版 vuejs技术交流QQ群:458915921 有兴趣的可以加入 vuejs 目录结构 build build.js check ...
随机推荐
- 【Learning】带花树——一般图最大匹配
一般图最大匹配--带花树 问题 给定一个图,求该图的最大匹配.即找到最多的边,使得每个点至多属于一条边. 这个问题的退化版本就是二分图最大匹配. 由于二分图中不存在奇环,偶环对最大匹配并无 ...
- assert断言检测
assert 是宏,非函数,包含在assert.h 头文件中. 如果其后面括号里的值为假,则程序终止运行,并提示出错.这个 宏只在 Debug 版本上起作用,而在 Release 版本被编译器完全优化 ...
- Tencent研发工程师笔试知识点
一: 32位编译器:32位系统下指针占用4字节 char :1个字节 char*(即指针变量): 4个字节(32位的寻址空间是2^32, 即32个bit,也就是4个字节.同 ...
- maven导入多模块项目
maven导入多模块项目 一.SVN上Maven多模块项目结构 使用eclipse导入SVN上的Maven多模块项目 Maven多模块项目所在SVN目录 二.eclipse通过SVN导入到工作空间 ...
- leaflet渲染mapbox gl的矢量数据
准备条件 1.mapbox-gl.js mapbox-gl.css 2.leaflet-mapbox-gl.js https://github.com/mapbox/mapbox-gl-leaflet ...
- Navicat通过跳板机连接数据库
完成对应设置后,即可连接数据库,本人亲测!
- Axis1.4之即时发布服务
下载axis1.4开发包,解压开发包,将webapps目录下的axis文件夹拷贝到tomcat的webapps目录下.启动tomcat,在浏览器输入http://localhost:8080/axis ...
- 使用jQuery动态克隆表格,并且添加至div中(使用前需要引入jQuery)
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- 【Flask】 利用uWSGI和Nginx发布Flask应用
因为Flask比较容易上手,之前也拿flask写过几个小项目,不过当时天真地以为只要在服务器上nohup跑一个python脚本就算是成功发布了这个flask项目.实际上这还面临很多问题,比如并发性不好 ...
- 如何在C#项目中使用NHibernate
现代化大型项目通常使用独立的数据库来存储数据,其中以采用关系型数据库居多.用于开发项目的高级语言(C#.Java等)是面向对象的,而关系型数据库是基于关系的,两者之间的沟通需要一种转换,也就是对象/关 ...