vuex的使用步骤是什么?一文带你快速了解vuex的用�

Admin 2021-05-29 群英技术资�

      Vuex 是一个专� Vue.js 应用程序开发的状态管理模式。为了帮助大家熟悉和理解vuex,这篇文章就给大家介绍关于vuex的使用步骤,下面一起跟随小编来学习吧�

      一、使用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 怎么�

      1.首先当然要安装啦 (假设你已经安装了vue)
npm install vuex
      2.引入并使用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
      3.实例化一个Vuex对象--Store状态机 并抛�
const store = new Vuex.Store({})

export defaul store 
      4.在main.js中引入并注入Vuex
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
 render: h => h(App),
 store
}).$mount('#app') 
      5.通过this.$store访问Vuex的数�

      到此,Vuex已准备完成,接下来就根据自己需要加入数据吧~

      四、示例代�

      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: {}, //异步操作
 getters:{},  //计算属�
 modules: {}  //模块
})
export default store 

注:别忘了在main.js里注入store呀(参考上面第三大点的�4小点�

      3.假设咱们现在需要共享一个数据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>

      现在大家对于vuex的使用步骤应该都有所了解了,上文对于新手快速熟悉vuex的使用有一定的帮助,感兴趣的朋友可以看看,希望大家阅读完这篇文章能有所收获。更多vuex的使用,可以浏览其他相关文章�

文本转载自脚本之�

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

群英网络开启智能安全云计算之旅

注册领取新人大礼�
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务

联系我们

24小时售后 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 公司总机�0668-2555555 公司传真�0668-2555000
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部