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

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 渐进式教程实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

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

    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.初级使用方法 //

  • 详解SpringBoot缓存的实例代码(EhCache 2.x 篇)

    本篇介绍了SpringBoot 缓存(EhCache 2.x 篇),分享给大家,具体如下: SpringBoot 缓存 在 spring Boot中,通过@EnableCaching注解自动化配置合适的缓存管理器(CacheManager),Spring Boot根据下面的顺序去侦测缓存提供者: Generic JCache (JSR-107) EhCache 2.x Hazelcast Infinispan Redis Guava Simple 关于 Spring Boot 的缓存机制: 高速

  • IE 条件注释详解总结(附实例代码)

    顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块.尽管是非标准的,但是有条件注释对于其他所有浏览器作为常规注释出现,因此本质上是无害的.有条件注释在Windows上的IE5中首次出现,并且得到了Widnows浏览器所有后续版本的支持. IE的有条件注释及其有效,而且非常容易记住.主要的缺点是这些注释需要放在HTML页面中,而不是放在CSS中.这样,当你不需要这些东西,或者有所更改的时候,就需要维护很多的地方. 让我们据几个例子来看看吧-- 只有IE才能识别 因为只有IE5以上的版

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

  • 详解Vuex中getters的使用教程

    目录 简介 说明 官网 getters概述 说明 来源 用法 示例 测试 简介 说明 本文用示例介绍Vuex的五大核心之一:getters. 官网 Getter | Vuex API 参考 | Vuex getters概述 说明 getters 是Store的计算属性,可以对State进行计算操作.就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 虽然组件内也可以做计算属性,但getters 可以在多组件之间复用.如果一个状态只在一个

  • 详解vuex的简单使用

    1 目录的配置 根据官方推荐在src目录里面创建store目录 2 创建store里面的文件 根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js 2.1 state.js state.js: 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态.至此它便作为一个『唯一数据源(SSOT)』而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接

  • 详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

  • Android AOP 注解详解及简单使用实例(三)

    Android  注解 相关文章: Android AOP注解Annotation详解(一) Android AOP之注解处理解释器详解(二) Android AOP 注解详解及简单使用实例(三) 一.简介 在Android 里面 注解主要用来干这么几件事: 和编译器一起给你一些提示警告信息. 配合一些ide 可以更加方便快捷 安全有效的编写Java代码.谷歌出的support-annotations这个库 就是主要干这个的. 和反射一起 提供一些类似于spring 可配置的功能,方便简洁. 二

  • 分位数回归模型quantile regeression应用详解及示例教程

    目录 什么是分位数? 什么是分位数回归? statsmodels中的分位数回归 分位数回归与线性回归 xgboost的分位数回归 普通最小二乘法如何处理异常值? 它对待一切事物都是一样的--它将它们平方! 但是对于异常值,平方会显著增加它们对平均值等统计数据的巨大影响. 我们从描述性统计中知道,中位数对异常值的鲁棒性比均值强. 这种理论也可以在预测统计中为我们服务,这正是分位数回归的意义所在--估计中位数(或其他分位数)而不是平均值. 通过选择任何特定的分位数阈值,我们既可以缓和异常值,也可以调

  • Spring Boot详解整合JWT教程

    目录 1.概述 2.优势所在 3.结构组成 3.1.标头(Header) 3.2.有效负载(Payload) 3.3.签名(Signature) 4.Spring boot整合JWT 导入依赖 1.概述 JWT 简称 JSON Web Token,也就是通过JSON形式作为Web应用中的令牌,用于各方之间安全地将信息作为JSON对象传输,在数据传输的过程中还可以完成数据加密.签名等相关处理. 2.优势所在 在JavaWeb阶段,经常使用session来存储,以方便用来判断用户是否操作等等.但这又

随机推荐