浅谈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 相关文章推荐
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
srcElement表格样式
2006/09/03 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
Python 3 判断2个字典相同
2019/08/06 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
财务管理个人自荐书范文
2013/11/24 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
太行山上观后感
2015/06/05 职场文书
永远是春天观后感
2015/06/12 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS