极乐门资源网

vuex管理状态仓库使用详解
网络编程 2024/11/18 佚名
2 0
极乐门资源网 Design By www.ioogu.com

一.什么是Vuex？

"_blank" href="https://github.com/vuejs/vue-devtools" rel="external nofollow" >devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。采用了全局单例模式，将组件的共享状态抽离出来管理，使得组件树中每一个位置都可以获取共享的状态或者触发行为。

"color: #ff0000">二.不使用vuex时与使用vuex时的差别

"htmlcode"> 

<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组件中的代码：

vuex管理状态仓库使用详解

点击按钮:

vuex管理状态仓库使用详解"text-align: center">vuex管理状态仓库使用详解

"color: #ff0000">使用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>

"color: #ff0000">三.vuex的使用

vuex的安装

"text-align: center">vuex管理状态仓库使用详解

vuex的核心概念：

  • State：共享状态，相当于组件中data中的数据，只不过此时变成了全局变量。
  • Getter：基于state的派生状态，相当于组件中的computed中的属性。
  • Mutation：更改vuex中store共享状态中的方法，通过提交mutation来去修改状态，进行同步操作数据，通常用于action获取异步数据，获取通过commit提交数据给mutation，在mutation同步操作state中的数据。
  • action：支持异步操作，可用于异步获取请求中的数据,并将获取的数据同步commit提交给mutation，实现ajax异步请求数据，mutation将其数据同步到state中。
  • module：为了方便后期对于项目的管理，对于store中的state，mutation，action，getter进行分子模块化管理。

下面我们的介绍将会在Module规范中进行介绍。

Module子模块化管理

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

module结构

vuex管理状态仓库使用详解

vuex应用核心管理仓库store

"htmlcode"> 

/*
  vuex最核心的管理对象store
*/
import Vue from 'vue';
import Vuex from 'vuex';

import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

//声明使用插件
Vue.use(Vuex)
//new 一个Vuex的对象,将state,mutation,action,getters配置到vuex的store中,方便管理数据
export default new Vuex.Store({  
  state,
  mutations,
  actions,
  getters,
})

state状态管理数据

"htmlcode"> 

/* 
  状态对象
*/
export default{
  userInfo: {}, //用户信息
  count:1
}

mutation-types

"htmlcode"> 

/* 
  包含n个mutation的type名称常量
*/
export const RECEIVE_USER_INFO = 'receive_user_info'  //接收用户信息

actions的异步操作

"htmlcode"> 

/* 
  通过mutation间接更新state的多个方法的对象
*/
import {
  RECEIVE_USER_INFO,   //引入在mutation-types定义的常量
} from './mutation-types';

import {
  reqUserInfo,
} from '../api';   //这里引入发送ajax请求的方法

export default{
  // 异步获取用户信息
  async getUserInfo({commit}){
  //引入发送请求数据的方法,异步等待获取数据，并将其数据赋值给result
    const result = await reqUserInfo() 
    //当获取数据成功时，result.code会为0，失败则为1，这里用于判断是否获取状态数据成功
    if (result.code === 0) { 
      const userInfo = result.data //获取请求中的数据
      //通过commit将其方法，和请求后获取的用户信息传递给mutation
      commit(RECEIVE_USER_INFO,{userInfo}) 
    }
  }
}

需要注意的是：在组件中应用下列方式来去调用vuex组件中的方法:

this.$store.dispatch('getUserInfo')

mutations同步提交数据

"htmlcode"> 

this.$store.commit('increment')

下面上mutation模块中的代码：

/* 
  直接更新state的多个方法的对象
*/

import {
  RECEIVE_USER_INFO,
} from './mutation-types';

export default{
//方法中的第一个默认形参为state,也可以传入额外的参数，
既mutation的载荷(playload)
  [RECEIVE_USER_INFO](state,{userInfo}){
    state.userInfo = userInfo
  },
  //不通过actions直接在mutation模块中更改state状态数据
  increment(state){
    state.count = 3
  }
}

Getters对state进行加工

Getters相当于computed计算属性，用于加工处理state状态数据，有其两个默认参数，第一个默认参数为state，第二个默认参数为getters。
在组件中调用该方法的代码片段为：

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

"htmlcode"> 

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

export default {
 computed: {
 // 使用对象展开运算符将 getter 混入 computed 对象中
  ...mapGetters(['plusCount','totalCount',])
 // 使用对象展开运算符将 state 混入 computed 对象中
 	...mapState(['userInfo','count'])
 }
}
标签：
vuex管理状态仓库,vue状态管理vuex
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“vuex管理状态仓库使用详解”

暂无vuex管理状态仓库使用详解的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com