登录  /  注册
首页 > web前端 > js教程 > 正文

关于Vuex的全家桶状态管理

小云云
发布: 2018-05-21 09:13:28
原创
1970人浏览过

vuex 是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。vuex 也集成到 vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。本文主要介绍了浅谈vuex状态管理(全家桶),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

以上是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: &#39;<App/>&#39;,
 components: { App }
})
登录后复制

3. 在store.js里引用Vuex

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;
Vue.use(Vuex) //注册Vuex

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

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

4. 在vue组件中使用

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

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

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

5. 查看演示

6. state访问状态对象

使用computed计算

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

<script>
import {mapState} from &#39;vuex&#39;
export default{
  name:&#39;hello&#39;, //写上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([
  //  &#39;count&#39;
  // ])
 }
</script>
登录后复制

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


<template>
 <p class="hello">
   <h1>Hello Vuex</h1>
   <h5>{{count}}</h5>
   <p>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
   </p>
 </p>
</template>
<script>
import {mapState,mapMutations} from &#39;vuex&#39;
 export default{
  name:&#39;hello&#39;, //写上name的作用是,如果你页面报错了,他会提示你是那个页面报的错,很实用
  //方法三
  computed: mapState([
   &#39;count&#39;
  ]),
  methods:{
   ...mapMutations([
     &#39;jia&#39;,
     &#39;jian&#39;
   ])
  }
 }
</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 &#39;vuex&#39;
 export default{
  name:&#39;hello&#39;,
  computed: {
   ...mapState([
    &#39;count&#39;
   ]),
   ...mapGetters([
    &#39;count&#39;
   ])
  },
  methods:{
   ...mapMutations([
     &#39;jia&#39;,
     &#39;jian&#39;
   ])
  }
 }
</script>
登录后复制

9. actions (异步状态)

在store.js添加actions

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;
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(&#39;jia&#39;) //调用mutations下面的方法
    setTimeout(()=>{
      context.commit(&#39;jian&#39;)
    },2000)
    alert(&#39;我先被执行了,然后两秒后调用jian的方法&#39;)
  },
  jianplus(context){
    context.commit(&#39;jian&#39;)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})
登录后复制

在组件中使用

<template>
 <p 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>
 </p>
</template>
<script>
 import {mapState,mapMutations,mapGetters,mapActions} from &#39;vuex&#39;
 export default{
  name:&#39;hello&#39;,
  computed: {
   ...mapState([
    &#39;count&#39;
   ]),
   ...mapGetters([
    &#39;count&#39;
   ])
  },
  methods:{
   // 这里是数组的方式触发方法
   ...mapMutations([
     &#39;jia&#39;,
     &#39;jian&#39;
   ]),
   // 换一中方式触发方法 用对象的方式
   ...mapActions({
    jiaplus: &#39;jiaplus&#39;,
    jianplus: &#39;jianplus&#39;
   })
  }
 }
</script>

<style scoped>
  h5{
   font-size: 20px;
   color: red;
  }
</style>
登录后复制

10. modules 模块

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

修改store.js

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;
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(&#39;jia&#39;) //调用mutations下面的方法
    setTimeout(()=>{
      context.commit(&#39;jian&#39;)
    },2000)
    alert(&#39;我先被执行了,然后两秒后调用jian的方法&#39;)
  },
  jianplus(context){
    context.commit(&#39;jian&#39;)
  }
}

//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,
  }
})
登录后复制

相关推荐:

实例分享Vue全家桶实践项目总结

使用React全家桶搭建一个后台管理系统实例详解

Vue2.0 全家桶开发的网页应用(参照吾记APP)

以上就是关于Vuex的全家桶状态管理的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号