详解vuex 渐进式教程实例代码


Posted in Javascript onNovember 27, 2018

vuex 渐进式教程,从入门级带你慢慢深入使用vuex。

Vuex 是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态, 并以相应 的规则保证状态以一种可预测的方式发生变化。

vuex官网: vuex.vuejs.org/zh/guide/

安装

安装vue-cli:

cnpm install -g vue-cli
 vue init webpack vuex

安装vuex

cnpm i vuex --save

1.初级使用方法

// main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex' // 引入vuex

Vue.config.productionTip = false

Vue.use(Vuex);

let store = new Vuex.Store({ // store 对象
 state:{
  count:0
 }
})

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, //使用store,这可以把 store 的实例注入所有的子组件
 components: { App },
 template: '<App/>'
})

此时可以在组件中使用 this.$store.state.count 获取store中state的值。如:

// 在组件的computed中使用
 computed:{
   count(){
   return this.$store.state.count;
   }
 }

想想一下当项目比较大的时候数据繁琐,如果按照上述方法使用vuex,当你打开main.js你看的到场景是比较混乱的,各种数据繁杂在一起,不便于日后的维护。请看下一步:

2.中级使用方法: modules 模块化

state用法

2.1 在main.js中删除下述这部分代码

let store = new Vuex.Store({ // store 对象
 state:{
  count:0
 }
})

2.2. 在src目录下新建store文件夹并在该文件夹下新建index.js文件。 在 store/index.js写入:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 strict:true, // 开启严格模式 确保state 中的数据只能 mutations 修改
 state:{
  count:0
 }
})
export default store;

对应的main.js应该写入:

import store from './store'

写到这里,我们在组件里就可以获取到store里的state的值了

2.3 为了方便测试直接在HelloWorld.vue 中使用store

<template>
 <div class="hello">
  <h2>{{count}}</h2>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 computed:{
   count(){
    return this.$store.state.count;
   }
 }
}
</script>

很多时候咱们要对state里的值进行操作,在vuex提供了一个方法mutations

mutations用法(使用mutations可以修改state的值)

在sore\index.js写入:

//
...
 state:{
  count:0
 },
 mutations:{ // 更改数据的方法
  add(state){
   state.count++
  },
  //提交载荷用法
//   add(state,n){ 
//   state.count += n
//  },
  sub(state){
   state.count--
  }
 }
...
//

组件(HelloWorld.vue)中使用mutations里对应的方法:

<template>
 <div class="hello">
  <button @click="add">+</button>
  <h2>{{count}}</h2>
  <button @click="sub">-</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 computed:{
   count(){
    return this.$store.state.count;
   }
 },
  methods:{
  add(){
   this.$store.commit('add');
  },
  
  //提交载荷用法
  // add(){ 
  //  this.$store.commit('add',10);
  // },
  
  //对象风格的提交方式
  //  store.commit({
  //   type: 'add',
  //   n: 10
  //   })
  
  sub(){
   this.$store.commit('sub');
  }
 }
}
</script>

此时就可以对count进行修改了。

当你想异步操作的时候,由于mutation必须是同步的这一点,此时不能采用mutation对state 进行修改。action派上用场了,action就是一个函数集合,在里面怎么操作都可以,只要最后触发mutation 就可以了。

注解mutation不能异步操作的原因:

mutations: {
  add (state) {
   api.callAsyncMethod(() => {
  state.count++
  })
 }
}

现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

Action 用法

在sore\index.js写入:

mutations:{ // 更改数据的方法
add(state){
   state.count++
  },
  sub(state){
   state.count--
  }
 },
++++
 actions:{
  add(context){ // context 与 store 实例具有相同方法和属性(但不是store 实例)
   setTimeout(()=>{
    context.commit('add');
   },1000)
  }
 }
++++

组件(HelloWorld.vue)中使用getters里对应的方法:

<template>
 <div class="hello">
  <button @click="add">+</button>
  ++++
  <button @click="add_action">action +</button>
  ++++
  <h2>{{count}}</h2>
  <button @click="sub">-</button>
  <div>
   test: {{doneTodos[0].text}} <br>
   length: {{doneTodosLength}}
  </div>
 </div>
</template>
export default {
 methods:{
  add(){
   this.$store.commit('add');
   // console.log(this);
  },
  sub(){
   this.$store.commit('sub');
  },
  ++++
  add_action(){
   this.$store.dispatch('add');
  }
  ++++
 }
}

看到这里有没有想过当我们使用state中某一个数据时,我们只想用该数据中符合条件的数据。比如:

state:{
  count:0,
  todos: [
   { id: 1, text: 'text1--true', done: true },
   { id: 2, text: 'text2--false', done: false }
  ]
 }

此时我们只想获取state.todos中done为true的数据时我们应该怎么获取?

可能会有以下两种方案:

1.每个在组件中首先获取todos,然后使用filter方法过滤;

2.写一个公共函数在每个组件中调用以下;

如果用到todos中done为true的组件很多,这两种方法都是很不理想的。Vuex为此为我们引入了一个方法Getter。

Getter 用法

官方解释:Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

在sore\index.js写入:

mutations:{ // 更改数据的方法
  add(state){
   state.count++
  },
  sub(state){
   state.count--
  }
 },
 +++
 getters:{ // 用法类似组件中的 computed, 可以认为是store的计算属性
  doneTodos:state => { // Getter 接受 state 作为其第一个参数:
   return state.todos.filter(todo => todo.done) // -> [{ id: 1, text: 'text1--true', done: true }]
  },
  // Getter 也可以接受其他 getter 作为第二个参数
  doneTodosLength:(state,getters) => {
   return getters.doneTodos.length // -> 1
  },
 +++
 }

组件(HelloWorld.vue)中使用getters里对应的方法:

<template>
 <div class="hello">
  <button @click="add">+</button>
  <h2>{{count}}</h2>
  <button @click="sub">-</button>
+++
  <div>
   test: {{doneTodos[0].text}} <br>
   length: {{doneTodosLength}}
  </div>
+++  
 </div>
</template>
<script>
export default {
 //...
  computed:{
  +++
    doneTodos(){
     return this.$store.getters.doneTodos // -> [{ id: 1, text: 'text1--true', done: true }]
    },
    doneTodosLength(){
     return this.$store.getters.doneTodosLength // -> 1
    }
  +++
 }
}
</script>

本篇代码地址: github.com/xioasa/vue-…

总结

以上所述是小编给大家介绍的vuex 渐进式教程实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
jquery 表单下所有元素的隐藏
Jul 25 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
js验证上传图片的方法
May 12 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 #Javascript
Node+OCR实现图像文字识别功能
Nov 26 #Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 #Javascript
JS 验证码功能的三种实现方式
Nov 26 #Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 #Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 #Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 #Javascript
You might like
PHP+MySQL插入操作实例
2015/01/21 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
js实现简单分页导航栏效果
2019/06/28 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
Eclipse + Python 的安装与配置流程
2013/03/05 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
详解Python的循环结构知识点
2019/05/20 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
美国网上花店:JustFlowers
2017/02/12 全球购物
人事主管岗位职责说明书
2014/07/30 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
2015年复活节活动总结
2015/02/27 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
anaconda python3.8安装后降级
2021/06/11 Python