浅谈Vuex的状态管理(全家桶)


Posted in Javascript onNovember 04, 2017

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明。这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex。

1. 安装

$ npm install vuex --save

2. 在main.js 主入口js里面引用store.js

import Vue from 'vue'
import App from './App'
import router from './router' 
import store from './vuex/store'  //引用store.js
Vue.config.productionTip = false //阻止在启动时生成生产提示 

//vue实例
new Vue({
 el: '#app',
 router,
 store,              //把store挂在到vue的实例下面
 template: '<App/>',
 components: { App }
})

3. 在store.js里引用Vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //注册Vuex

// 定义常量  如果访问他的话,就叫访问状态对象
const state = {
  count: 1
}

// mutations用来改变store状态, 如果访问他的话,就叫访问触发状态
const mutations = {
  //这里面的方法是用 this.$store.commit('jia') 来触发
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
//暴露到外面,让其他地方的引用
export default new Vuex.Store({
  state,
  mutations
})

4. 在vue组件中使用

使用$store.commit('jia')区触发mutations下面的加减方法

<template>
 <div class="hello">
   <h1>Hello Vuex</h1>
   <h5>{{$store.state.count}}</h5>
   <p>
    <button @click="$store.commit('jia')">+</button>
    <button @click="$store.commit('jian')">-</button>
   </p>
 </div>
</template>

<!-- 加上scoped是css只在这个组件里面生效,为了不影响全局样式 -->
<style scoped>
  h5{
   font-size: 20px;
   color: red;
  }
</style>

5. 查看演示

浅谈Vuex的状态管理(全家桶)

6. state访问状态对象

使用computed计算

<template>
 <div class="hello">
   <h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button @click="$store.commit('jia')">+</button>
    <button @click="$store.commit('jian')">-</button>
   </p>
 </div>
</template>

<script>
import {mapState} from 'vuex'
export default{
  name:'hello', //写上name的作用是,如果你页面报错了,他会提示你是那个页面报的错,很实用
  // 方法一
  // computed: {
  //  count(){
  //   return this.$store.state.count + 6
  //  }
  // }
  
  // 方法二 需要引入外部 mapState
  computed:mapState({
   count:state => state.count + 10
  })
 
  // ECMA5用法
  // computed:mapState({
  //  count:function(state){
  //   return state.count
  //  }
  // })
  
  //方法三
  // computed: mapState([
  //  'count'
  // ])
 }
</script>

7. mutations触发状态 (同步状态)

<template>
 <div class="hello">
   <h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
   </p>
 </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
 export default{
  name:'hello', //写上name的作用是,如果你页面报错了,他会提示你是那个页面报的错,很实用
  //方法三
  computed: mapState([
   'count'
  ]),
  methods:{
   ...mapMutations([
     'jia',
     'jian'
   ])
  }
 }
</script>

8. getters计算属性

getter不能使用箭头函数,会改变this的指向

在store.js添加getters

// 计算
const getters = {
  count(state){
    return state.count + 66
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters
})
//count的参数就是上面定义的state对象
//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法,使用的时候也用count,保持一致。
组件中使用

<script>
 import {mapState,mapMutations,mapGetters} from 'vuex'
 export default{
  name:'hello',
  computed: {
   ...mapState([
    'count'
   ]),
   ...mapGetters([
    'count'
   ])
  },
  methods:{
   ...mapMutations([
     'jia',
     'jian'
   ])
  }
 }
</script>

9. actions (异步状态)

在store.js添加actions

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 定义常量
const state = {
  count: 1
}

// mutations用来改变store状态 同步状态
const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
// 计算属性
const getters = {
  count(state){
    return state.count + 66
  }
}
// 异步状态
const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('我先被执行了,然后两秒后调用jian的方法')
  },
  jianplus(context){
    context.commit('jian')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

在组件中使用

<template>
 <div class="hello">
   <h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
   </p>
   <p>
    <button @click="jiaplus">+plus</button>
    <button @click="jianplus">-plus</button>
   </p>
 </div>
</template>
<script>
 import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
 export default{
  name:'hello',
  computed: {
   ...mapState([
    'count'
   ]),
   ...mapGetters([
    'count'
   ])
  },
  methods:{
   // 这里是数组的方式触发方法
   ...mapMutations([
     'jia',
     'jian'
   ]),
   // 换一中方式触发方法 用对象的方式
   ...mapActions({
    jiaplus: 'jiaplus',
    jianplus: 'jianplus'
   })
  }
 }
</script>

<style scoped>
  h5{
   font-size: 20px;
   color: red;
  }
</style>

10. modules 模块

适用于非常大的项目,且状态很多的情况下使用,便于管理

修改store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  count: 1
}
const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
}
const getters = {
  count(state){
    return state.count + 66
  }
}
const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000)
    alert('我先被执行了,然后两秒后调用jian的方法')
  },
  jianplus(context){
    context.commit('jian')
  }
}

//module使用模块组的方式 moduleA
const moduleA = {
  state,
  mutations,
  getters,
  actions
}

// 模块B moduleB
const moduleB = {
  state: {
    count:108
  }
}

export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})

浅谈Vuex的状态管理(全家桶)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
小程序实现五星点评效果
Nov 03 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
vue-test-utils初使用详解
May 23 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
简述Angular 5 快速入门
Nov 04 #Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 #Javascript
vue中使用localstorage来存储页面信息
Nov 04 #Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 #Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 #Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 #Javascript
You might like
一段php加密解密的代码
2006/10/09 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
python实现淘宝秒杀脚本
2020/06/23 Python
python从PDF中提取数据的示例
2020/10/30 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
主题班会开场白
2015/06/01 职场文书
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android
JavaScript 原型与原型链详情
2021/11/02 Javascript
利用python做数据拟合详情
2021/11/17 Python