本讲解基于Vue-cli(脚手架)搭建的项目。

Vuex 数据状态管理工具,整个流程类似依赖注入,相当于预先定义,倒推。(个人理解)

1. 安装vuex  命令行输入

  npm install vuex --save

2.在根目录的src下新建 store文件夹,并且在其内创建5个js文件。

index.js中写入代码 (主要是汇集处理其他4个js文件)

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as mutations from './mutations'
import * as getters from './getters'
import state from './rootState' Vue.use(Vuex) //引用vuex const store = new Vuex.Store({
state,
getters,
actions,
mutations
}) export default store;

在根目录的src下的 main.js 中引入store

import store from './store';   //引入store文件下的index.js和引入路由方式相同
并且在实例化 Vue对象时加入 store 对象:
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})
配置完成后就可以使用了。
rootState.js   主要预先定义了一些将要处理的数据

actions.js    主要预先定义了一些方法,把从组件获取的数据提交到类似缓存状态
mutations.js  主要对rootState.js中的数据与缓存的数据进行赋值等操作
getters.js    主要获取了rootState.js中被处理的数据,等待被注入使用的组件中

新建一个test.vue
//引入vue,vuex,
<template>
<div>
<div class="content">
<h1>测试</h1>
<div>
<span>{{ msg }}</span>..
<!-- 注入的属性 -->
<button @click='fun'>获取数据</button>
          <!-- 注入的方法 -->
</div>
</div>
</div>
</template> <script>
import Vue from 'vue';
import { mapGetters, mapActions } from 'vuex'; // 这个例子的用意是:
// ①、用户点击button,触发绑定在click上的fun方法
// ②、fun是定义在actions.js中的,这个方法会调用vue自带的commit方法
// ③、commit方法会自动调用mutations中对应的方法
// ④、在mutations中更新store上的数据msg,从而Test.vue中的msg自动得到更新
export default {
name: 'test',
methods: {
...mapActions([ // 和引入的vuex中的mapActions对应
'fun', // 在src/store/actions.js中创建一个名为fun的方法 在这里注入即可使用(方法)
]),
},
computed: {
...mapGetters([ //和引入的vuex中的mapGetters对应
'msg' // 在src/store/getters.js中创建一个名为msg的方法 在这里注入使用 (计算属性)
]),
}
}
</script> <style scoped > </style>
再看 actions.js

//导出了fun这个方法 在test.vue中注入使用
//定义了个fun方法其中自带了第一个参数{{commit}},还可以在test.vue使用fun 这个方法时传入参数,即为这里的第二个参数,以此类推,这里没新传入参数
export const fun = ({commit})=>{
commit({
type: 'getMsg', // 这个type很重要,vue会自动去找mutations.js中名为getMsg的方法 //类似被注入的方法
msg:'提交的数据1111', // 这里的参数写死了,可以自定义,也可通过传参设定
});//commit方法作用类似把这其中的这个参数对象提交到缓存,以便在mutations.js中对这些数据处理
}

然后 mutations.js

//定义了个 getMsg 方法 传入两个参数 state(rootState.js中定义的数据),payload(actions.js中传来的对象)
export const getMsg = (state, payload) => {
state.msg = payload.msg;//赋值给想变化的值
}

之后 getters.js

导出msg这个计算属性 在test.vue中注入使用
export const msg = state => state.msg; //获取rootState.js的state作为参数(此时已经被mutations.js的方法赋值),再导出msg这个带值方法
最后基本过程:
用户点击button,触发绑定在click上的fun方法
fun是定义在actions.js中的,这个方法会调用vue自带的commit方法
commit方法会自动调用mutations中对应的方法
在mutations中更新store上的数据msg,从而Test.vue中的msg自动得到更新

本教程vue项目的完整地址在----------  https://github.com/TKBnice/vue-res

Vuex非常适合新手的教程,保教不会!的更多相关文章

  1. gulp的使用以及Gulp新手入门教程

    Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...

  2. Linux 新手入门教程

    Linux 新手入门教程 1991年10月5日,Linus Torvalds 在互联网上发布消息,宣布他自己开发的内核系统诞生了.他将内核源代码保存在芬兰最大的 FTP 网站上,命名为 Linux,取 ...

  3. GitHub 上适合新手的开源项目(Python 篇)

    作者:HelloGitHub-卤蛋 随着 Python 语言的流行,越来越多的人加入到了 Python 的大家庭中.为什么这么多人学 Python ?我要喊出那句话了:"人生苦短,我用 Py ...

  4. Xorboot-UEFI新手入门教程

    Xorboot-UEFI新手入门教程        Xorboot-UEFI是一款UEFI下轻量级的图形化多系统引导程序,pauly于2014年国庆节期间发布了预览版.搜了下论坛,关于Xorboot- ...

  5. Gulp新手入门教程

    Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 ...

  6. Windows学习总结(6)——MindManager新手入门教程

    MindManager新手入门教程 MindManager是一款创造.管理和交流思想的思维导图软件,其直观清晰的可视化界面和强大的功能可以快速捕捉.组织和共享思维.想法.资源和项目进程等等.MindM ...

  7. 适合新手:从零开发一个IM服务端(基于Netty,有完整源码)

    本文由“yuanrw”分享,博客:juejin.im/user/5cefab8451882510eb758606,收录时内容有改动和修订. 0.引言 站长提示:本文适合IM新手阅读,但最好有一定的网络 ...

  8. 思维导图软件MindManager新手入门教程

    MindManager是一款创造.管理和交流思想的思维导图软件,其直观清晰的可视化界面和强大的功能可以快速捕捉.组织和共享思维.想法.资源和项目进程等等.MindManager新手入门教程专为新手用户 ...

  9. 最适合和最不适合新手使用的几款 Linux 发行版

    大多数知名的Linux发行版都属于"比较容易使用"这一类.一些观察人士可能会驳斥这个观点,但事实上,说到Linux,大多数并非从事IT或软件开发工作的人会被最容易的使用体验所吸引. ...

随机推荐

  1. 使用 Hibernate 和 MySQL 需要知道的五件事

    https://www.thoughts-on-java.org/5-things-you-need-to-know-when-using-hibernate-with-mysql/ 作者:Thorb ...

  2. Java中数组的遍历

    (I)标准for循环遍历数组 例如代码片段: int [] nums = new int [] {0,1,2,3,4,5,6,7,8,9}; for(int i=0;i<11;i++){ Sys ...

  3. Jvm加载jar包的顺序

    使用-XX:+TraceClassPaths或者在服务器上执行jinfo时,都能得到classpath包含的jar包,例如: java.class.path = local/aaa/lib/sprin ...

  4. [译]ASP.NET Core 2.0 全局配置项

    问题 如何在 ASP.NET Core 2.0 应用程序中读取全局配置项? 答案 首先新建一个空项目,并添加两个配置文件: 1. appsettings.json { "Section1&q ...

  5. 使用EF操作Mysql数据库中文变问号的解决方案

    问题场景:使用Entity Framework 6.0 操作Mysql数据库,中文保存至数据库后全部变成问号.但是使用Mysql API却不会. 原因排查:首先想到的肯定是数据库编码问题,一次查询了表 ...

  6. [ACdream]女神教你字符串——违和感

    题目描述: 女神最喜欢字符串了,字符串神马的最有爱了. 女神是一个重度强迫症患者,面对不是对称的东西,她会觉得太违和了,就会爆炸.所以她手上的字符串都是回文的,像什么a,b,aabaa,abcba,上 ...

  7. VPS搭建离线下载服务器——后网盘时代

    动机 由于学习的需要,在国外某服务器厂商购买了vps服务(至于是哪个厂商就不说啦).但是呢,就算用作梯子,一个月1T的流量总是用不完.最经觉得自己营养充足,想找点电影看看. 无奈现在百度网盘的速度真的 ...

  8. 版本控制之五:SVN trunk(主线) branch(分支) tag(标记) 用法详解和详细操作步骤(转)

    使用场景: 假如你的项目(这里指的是手机客户端项目)的某个版本(例如1.0版本)已经完成开发.测试并已经上线了,接下来接到新的需求,新需求的开发需要修改多个文件中的代码,当需求已经开始开发一段时间的时 ...

  9. The Balance

    The Balance Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  10. 关于01背包求第k优解

    引用:http://szy961124.blog.163.com/blog/static/132346674201092775320970/ 求次优解.第K优解 对于求次优解.第K优解类的问题,如果相 ...