浅谈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 相关文章推荐
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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开发中的安全防范知识详解
2013/06/06 PHP
PHP 正则表达式小结
2015/02/12 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
在Mac上删除自己安装的Python方法
2018/10/29 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
Python 私有化操作实例分析
2019/11/21 Python
python 实现视频 图像帧提取
2019/12/10 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
文员岗位职责
2013/11/09 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
开业典礼主持词
2014/03/21 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
老兵退伍感言
2015/08/03 职场文书
高二化学教学反思
2016/02/22 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android