vue学习笔记:Vuex使用流程

vue学习笔记:Vuex使用流程

文章资讯开源世界2021-08-04 14:18:173370A+A-

关于VueX

VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。


一、使用Vuex的目的


实现多组件状态管理。多个组件之间需要数据共享时,Vuex是个很好的帮手哦

二、Vuex 的五大核心


其中state和mutation是必须的,其他可根据需求来加

1、state


负责状态管理,类似于vue中的data,用于初始化数据


2、mutation


专用于修改state中的数据,通过commit触发


3、action


可以处理异步,通过dispatch触发,不能直接修改state,首先在组件中通过dispatch触发action,然后在action函数内部commit触发mutation,通过mutation修改state状态值


4、getter


Vuex中的计算属性,相当于vue中的computed,依赖于state状态值,状态值一旦改变,getter会重新计算,也就是说,当一个数据依赖于另一个数据发生变化时,就要使用getter


5、module


模块化管理


使用

安装vuex

使用npm下载:

npm install vuex --save

使用vue-cli构建项目时选择使用vuex

创建文件及基本结构

创建store文件夹,目录结构如下:


vue学习笔记:Vuex使用流程 新闻 第1张

2.创建index.js,代码结构如下:


 

// 导入vue及vuex

import Vue from 'vue'

import Vuex from 'vuex'

// 挂载vuex

Vue.use(Vuex)

 

// 创建vuex对象并向外暴露

export default new Vuex.Store({

  // 全局属性变量

  state: {

  },

  // 全局同步方法, 调用方法,this.$store.commit("xxx")

  mutations: {

  },

  // 异步方法 调用方法,this.$store.dispatch("xxx") 

  actions: {

  },

  // Vuex属性计算,在视图里面当变量使用

  getters: {

  },

  // 模块化注册

  modules: {

  }

})

 

挂载到vue实例中并设置全局调用

在入口文件main.js中添加


// 导入

import store from './store/index.js'

// 挂载到Vue实力上,全局可通过this.$store进行调用

Vue.prototype.$store = store

示例代码

1.首先准备至少两个组件,不然怎么数据共享呢


<template>

  <div>

    我是组件1

  </div>

</template>

 

<script>

export default {

   

}

</script>

<style scoped>

</style>

<template>

  <div>

    我是组件2

  </div>

</template>

 

<script>

export default {

   

}

</script>

<style scoped>

</style>

2.在store.js中写Vuex相关代码


import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

    state: {},       //状态管理

    mutations: {},   //修改state

    actions: {},    //异步操作

    modules: {}     //模块

})

export default store

注:别忘了在main.js里注入store呀!

假设咱们现在需要共享一个数据data,初始值为0

···

const store = new Vuex.Store({

    state: {

        data:0

    }       

})

···

4.组件1和组件2都可以通过$store拿到data


 <div>

    我是组件1

    {{this.$store.state.data}}  //浏览器中此处会显示data的值

 </div>

 <div>

    我是组件2

    {{this.$store.state.data}}  //浏览器中此处会显示data的值

 </div>

5.那么怎么修改data呢,这时候就需要mutation出马了


mutation实质是一个函数,接收state和调用时传来的params参数

mutations: {

    changeDataMut(state,params){  

        state.data = params

    }

}

6.mutation有了,接下来就需要在组件中调用它,记得要用commit触发


<template>

  <div>

    我是组件1

    <button @click='changeData'>改数据</button>

  </div>

</template>

<script>

export default {

   data(){

       return {

           changeData(){

           // 通过commit 触发 mutation 并传参

               this.$store.commit('changeDataMut',10)  //此时组件1和组件2中data都是10啦

           }

       }

   }

}

</script>

7.action怎么用?


action也是函数。

前面已经说到,action不能直接修改state,首先要在组件中通过dispatch触发action,然后在action函数内部commit触发mutation,通过mutation修改state状态值。

注意action的参数

actions: {

    changeDataAct(context,params){  //context是一个对象,从它里面把咱们需要的commit方法解构出来

        let {commit} = context

        commit('changeDataMut',params)

    }

}

这时候可以在组件中触发action了,注意使用dispatch


<template>

  <div>

    我是组件2

    <button @click='changeData'>改数据</button>

  </div>

</template>

<script>

export default {

   data(){

       return {

           changeData(){

                // 通过dispatch 触发 action 并传参

                this.$store.dispatch('changeDataAct',100)//此时data就变成100啦,并且组件1和组件2是同步的

           }

       }

   }

}

</script>

8.getter的用法


getter 计算属性 ,依赖于state值,需要return

现在咱们假设一个值double,它是data的两倍,并且会随着data发生改变

getters:{

    doubleGet(state){

        return state.data*2

    }

}

我们可以在组件中使用它了

<div>

    我是组件2

    {{this.$store.getters.doubleGet}}

</div>

vue学习笔记总结分享,欢迎点赞分享!



Copyright 开源世界 版权所有 精品源码推荐:http://github.crmeb.net/u/defu
#转载请注明出处!

点击这里复制本文地址以上内容由开源世界整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

开源世界-开源独尊-开源中国-ThinkPHP-CRMEB-商城源码-项目下载站-CMS企业模板-互站网-悟空源码-A5资源网-CSDN-ASP300 © All Rights Reserved.  Copyright 开源世界 版权所有
Powered by 百搜科技 Themes by www.baisou.ltd
联系我们|关于我们|留言建议|网站管理

分享:

支付宝

微信

嘿,欢迎咨询
请先 登录 再评论,若不是会员请先 注册