浅谈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代码
Jul 20 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
javascript求日期差的方法
Mar 02 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php实现俄罗斯乘法实例
2015/03/07 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
javascript 常用功能总结
2012/03/18 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
[38:23]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第一场
2014/05/24 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python写的一个文本编辑器
2014/01/23 Python
Python多线程实例教程
2014/09/06 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Python文件路径名的操作方法
2019/10/30 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
导游欢迎词范文
2015/01/23 职场文书
鉴史问廉观后感
2015/06/10 职场文书
追悼会悼词大全
2015/06/23 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
4种方法python批量修改替换列表中元素
2022/04/07 Python
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis