首页 | 编程 | Java

vuex管理状态仓库使用详解

2020年07月29日 作者：我的名字豌豆原文

一.什么是Vuex？

 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。采用了全局单例模式，将组件的共享状态抽离出来管理，使得组件树中每一个位置都可以获取共享的状态或者触发行为。

 那么什么是状态呢？我把状态理解为在没有使用vuex时，在当前组件中data内需要共用的数据为状态。

 vuex使得状态或行为成为了共享的状态，所共享的状态或行为可以在各个组件中都可以访问到，省去了子父或子子之间传递变量，提高了开发效率。

二.不使用vuex时与使用vuex时的差别

 当我们不使用vuex时，对于组件之间传递信息会较为麻烦。

不使用vuex时父子之间传递信息：

App.vue文件中：

<template>
 <div id="app">
   <Fruits :fruitList="fruitList"/>
 </div>
</template> 
<script>
import Goods from './components/Goods';
export default {
 name: 'App',
 components:{
  Fruits,
  Goods
 },
 data(){
  return{
   goodList:[
   {
    name:'doll',
    price:12
   },
   {
    name:'glass',
    price:10
   }
  ],
  }
 }
}
</script>
<style>
</style>

Good.vue文件中：

<template>
 <div class="hello">
   <ul>
    <li v-for="(good,index) in goodList" :key="index">
     name:{{good.name}} number: {{good.number}} {{index}}
    </li>
   </ul>
 </div>
</template>

<script>
export default {
 props:['goodList'],
}
</script>
<style>

</style>

兄弟之间传递信息：

首先先创建一个js文件作为两兄弟之间传输的纽扣，这里起名为msg.js

//创建并暴露vue
import Vue from 'vue';
export default new Vue

兄弟组件Goods：

<template>
 <div>
    <button @click="deliver">点击</button>
 </div>
</template>

<script>
import MSG from '../msg';
export default {
 data(){
  return{
   msg:'hahah'
  }
 },
 methods:{
  deliver() {
    MSG.$emit('showMsg',this.msg)
  }
 }
 
}
</script>
<style>

</style>

兄弟组件Fruits:

<template>
 <div>
    <button @click="deliver">点击</button>
 </div>
</template>

<script>
import MSG from '../msg';
export default {
 data(){
  return{
   msg:'hahah'
  }
 },
 methods:{
  deliver() {
    MSG.$emit('showMsg',this.msg)
  }
 }
 
}
</script>
<style>

</style>

在App组件中的代码：

点击按钮:


 上述为兄弟组件之间的传值，是不是感觉到有点麻烦呢？初学vue组件传值时，我也觉得这种方法很麻烦，vuex很好的解决了这个问题，愉快的编写代码。

使用vuex共享状态数据

store.js中的配置：

import Vue from 'vue';  //引入vue
import Vuex from 'vuex'; //引入vuex

Vue.use(Vuex) //声明使用Vuex

const state = {
  count:1,
  totalName:'total'
}

const store = new Vuex.Store({
  state
 })
 export default store

App.vue中的配置：

<template>
 <div id="app">
   <Fruits>
   <div>--------------------------</div>
   <Goods>
 </div>
</template> 
<script>
import Fruits from './components/Fruits';
import Goods from './components/Goods';
export default {
 name: 'App',
 components:{
  Fruits,
  Goods
 }
}
</script> 

<style>

</style>

Good.vue中的配置

<template>
 <div>
  <div>我是Goods中的组件</div>
   <div>我们共同的数字:{{this.count}}</div>
  <div>我们共同的名字是 {{this.totalName}} </div>
 </div>
</template>
<script>
import {mapState} from 'vuex'; //引入辅助函数
export default {
  computed:{
   ...mapState(['count','totalName']) //对象展开运算符
  } 
}
</script>
<style>

</style>

Fruits.vue

<template>
 <div>
  <div>我是Fruits中的组件</div>
  <div>我们共同的数字:{{this.count}}</div>
  <div>我们共同的名字是 {{this.totalName}} </div>
 </div>
</template>

<script>
import {mapState} from 'vuex';  //引入辅助函数
export default {
  computed:{
    ...mapState(['count','totalName'])  //对象展开运算符
  }
}
</script>

<style>

</style>

  上述为使用vuex进行简单的引用状态数据值的例子，将数据放到state中进行管理，引入辅助函数和将state中的数据引入组件，在组件中进行调用，这种方法是不是比不使用vuex更容易了点呢？但是这才只是个非常浅非常浅的开始。下面进入正文！！！

三.vuex的使用

vuex的安装

 打开终端，输入命令行npm install vuex --save进行下载vuex

Module子模块化管理

对于子模块管理我们需要创建核心化管理对象store起名为index.js将其他state,getter,mutations,actions。引入到该store模块中，并将其暴露Store对象，下面为代码部分。

module结构

在组件中调用该方法的代码片段为：

this.$store.getters.totalCount()

下面为Getters中的代码片段:

/* 
  包含多个基于state的getter计算属性的对象 
*/
export default{

  plusCount(state){
    return state.count + 1
  },
 //获取state中状态数据对象，和获取getters模块中plusCount数据
  totalCount(state,getters){
    return getters.plusCount + state.count
  }
  
}

那么对于以上的store我们就简单介绍完了，相信大家看完后对于vuex会有一定的理解。那么这个时候我们要想，是不是使用this.$store.state或this.$store.getters.xxx感到麻烦呢？下面我们介绍另一种引入state和getters的方式

辅助函数mapState和mapGetters

 对于上述的引用state和getters的方法是不是感到麻烦呢？使用mapState你将会感受到便利。

//首先我们需要先将辅助函数引入
import { mapGetters,mapState } from 'vuex'

export default {
 computed: {
 // 使用对象展开运算符将 getter 混入 computed 对象中
  ...mapGetters(['plusCount','totalCount',])
 // 使用对象展开运算符将 state 混入 computed 对象中
 	...mapState(['userInfo','count'])
 }
}

到此这篇关于vuex管理状态仓库使用详解的文章就介绍到这了,更多相关vuex管理状态仓库内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！

相关链接
    无相关信息