首先先正经的来一段官网的"忠告":

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 - 项目结构目录及一些简单配置的更多相关文章

  1. day23单例模式 , 日志处理 , 项目结构目录

    # day23笔记 ## 一.补充,作业 ### 1.字符串格式化 ```pythonmsg = "我是%(n1)s,年龄%(n2)s" % {'n1': 'alex', 'n2' ...

  2. ReactNative项目结构目录详解

    在使用 react-native init TestProject 在新建项目时,会看到如下目录 React Native结构目录 名称 描述 android目录 Android项目目录,包含了使用A ...

  3. 读懂Android项目结构目录

    我们看到下图:当我们创建了第一Android项目的时候有没有被吓到.怎么这么多目录,好头晕啊!没事, 那我们今天就了解一下这些目录是做什么的: src: src 目录是放置我们所有 Java 代码的地 ...

  4. eclipse项目结构目录

    文章:eclipse web 项目目录结构 地址:https://blog.csdn.net/Alan_Wdd/article/details/90514928 eclipse web 项目目录结构 ...

  5. intellij idea - Project Structure 项目结构详解(简单明了)

    IDEA Project Structure 设置 可以点击  按钮,或者使用快捷键 Ctrl + Shift + Alt + S  打开 Project Structure .如下如所示: 项目的左 ...

  6. Android项目结构 以及体系结构

    学习Android平台的人一般对Android的平台的应该有点认识 其它的就不多讲了 Android项目一般由以下几个部分构成 以上是一个简单的Android项目结构目录图 1. src  主要是 源 ...

  7. Flask项目示例目录

    Flask不同于Django,Django在创建程序时自动得到必要的目录文件,而Flask则只有一个空文件夹,所以关于Flask项目的目录我们需要自行配置. 首先利用pycharm创建一个项目,在根目 ...

  8. Maven项目的目录结构+maven的安装与配置

    1.首先下载maven,然后配置环境变量,在MyEclipse里面配置maven 2.配置maven的pom.xml文件 3.下载和更新资源 右击项目,有一个Maven4Myeclipse,里面有三个 ...

  9. vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版

    vuejs目录结构启动项目安装nodejs命令,api配置信息思维导图版 vuejs技术交流QQ群:458915921 有兴趣的可以加入 vuejs 目录结构 build build.js check ...

随机推荐

  1. 【Learning】带花树——一般图最大匹配

    一般图最大匹配--带花树 问题 ​ 给定一个图,求该图的最大匹配.即找到最多的边,使得每个点至多属于一条边. ​ 这个问题的退化版本就是二分图最大匹配. ​ 由于二分图中不存在奇环,偶环对最大匹配并无 ...

  2. assert断言检测

    assert 是宏,非函数,包含在assert.h 头文件中. 如果其后面括号里的值为假,则程序终止运行,并提示出错.这个 宏只在 Debug 版本上起作用,而在 Release 版本被编译器完全优化 ...

  3. Tencent研发工程师笔试知识点

      一: 32位编译器:32位系统下指针占用4字节       char :1个字节       char*(即指针变量): 4个字节(32位的寻址空间是2^32, 即32个bit,也就是4个字节.同 ...

  4. maven导入多模块项目

    maven导入多模块项目   一.SVN上Maven多模块项目结构 使用eclipse导入SVN上的Maven多模块项目 Maven多模块项目所在SVN目录 二.eclipse通过SVN导入到工作空间 ...

  5. leaflet渲染mapbox gl的矢量数据

    准备条件 1.mapbox-gl.js mapbox-gl.css 2.leaflet-mapbox-gl.js https://github.com/mapbox/mapbox-gl-leaflet ...

  6. Navicat通过跳板机连接数据库

    完成对应设置后,即可连接数据库,本人亲测!

  7. Axis1.4之即时发布服务

    下载axis1.4开发包,解压开发包,将webapps目录下的axis文件夹拷贝到tomcat的webapps目录下.启动tomcat,在浏览器输入http://localhost:8080/axis ...

  8. 使用jQuery动态克隆表格,并且添加至div中(使用前需要引入jQuery)

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  9. 【Flask】 利用uWSGI和Nginx发布Flask应用

    因为Flask比较容易上手,之前也拿flask写过几个小项目,不过当时天真地以为只要在服务器上nohup跑一个python脚本就算是成功发布了这个flask项目.实际上这还面临很多问题,比如并发性不好 ...

  10. 如何在C#项目中使用NHibernate

    现代化大型项目通常使用独立的数据库来存储数据,其中以采用关系型数据库居多.用于开发项目的高级语言(C#.Java等)是面向对象的,而关系型数据库是基于关系的,两者之间的沟通需要一种转换,也就是对象/关 ...