日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
我們一起看看Vuex使用流程是什么樣的?

一、使用Vuex的目的

實(shí)現(xiàn)多組件狀態(tài)管理，多個(gè)組件之間需要數(shù)據(jù)共享

二、Vuex 的五大核心

其中state和mutation是必須的，其他可根據(jù)需求來加

  • 1、state 負(fù)責(zé)狀態(tài)管理，類似于vue中的data，用于初始化數(shù)據(jù)
  • 2、mutation 專用于修改state中的數(shù)據(jù)，通過commit觸發(fā)
  • 3、action 可以處理異步，通過dispatch觸發(fā)，不能直接修改state，首先在組件中通過dispatch觸發(fā)action，然后在action函數(shù)內(nèi)部commit觸發(fā)mutation，通過mutation修改state狀態(tài)值
  • 4、getter Vuex中的計(jì)算屬性，相當(dāng)于vue中的computed,依賴于state狀態(tài)值，狀態(tài)值一旦改變，getter會(huì)重新計(jì)算，也就是說，當(dāng)一個(gè)數(shù)據(jù)依賴于另一個(gè)數(shù)據(jù)發(fā)生變化時(shí)，就要使用getter
  • 5、module 模塊化管理

使用流程

1.創(chuàng)建store實(shí)例并且導(dǎo)出 store.js

 
 
 
 
    
  
  
  
  
  1. import Vue from 'vue' 
    2.   
  
  
  
  2. import Vuex from 'vuex' 
    3.   
  
  
  
  3. Vue.use(Vuex) 
    4.   
  
  
  
  4. const store = new Vuex.Store({ 
    5.   
  
  
  
  5.     //聲明state 
    6.   
  
  
  
  6.     state: {  
    7.   
  
  
  
  7.       userInfo:{ userName:"" } 
    8.   
  
  
  
  8.     },        
    9.   
  
  
  
  9.     //聲明mutations 
    10.   
  
  
  
  10.     mutations: { 
    11.   
  
  
  
  11.       setUserInfo(state,userInfo){   
    12.   
  
  
  
  12.         state.userInfo = userInfo 
    13.   
  
  
  
  13.       } 
    14.   
  
  
  
  14.     },    
    15.   
  
  
  
  15.     //聲明actions 
    16.   
  
  
  
  16.     actions: { 
    17.   
  
  
  
  17.       setUserInfo({ commit },userInfo){ 
    18.   
  
  
  
  18.         commit('setUserInfo',userInfo) 
    19.   
  
  
  
  19.       } 
    20.   
  
  
  
  20.     },     
    21.   
  
  
  
  21.     //聲明getters 
    22.   
  
  
  
  22.     getters:{ 
    23.   
  
  
  
  23.       userName(state){ 
    24.   
  
  
  
  24.         return "姓名："+state.userInfo.userName 
    25.   
  
  
  
  25.       } 
    26.   
  
  
  
  26.     } 
    27.   
  
  
  
  27. }) 
    28.   
  
  
  
  28. export default store 
    29.

2.引入Vuex

 
 
 
 
    
  
  
  
  
  1. import Vue from 'vue' 
    2.   
  
  
  
  2. import App from './App.vue' 
    3.   
  
  
  
  3. import store from './store' 
    4.   
  
  
  
  4. new Vue({ 
    5.   
  
  
  
  5.   render: h => h(App), 
    6.   
  
  
  
  6.   store 
    7.   
  
  
  
  7. }).$mount('#app') 
    8.

3.組件內(nèi)使用

使用方式一

 
 
 
 
    
  
  
  
  
  1.  
    2.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. export default { 
    2.   
  
  
  
  2.    methods: { 
    3.   
  
  
  
  3.       setInfo(){ 
    4.   
  
  
  
  4.         this.$store.commit('setUserInfo',{ 
    5.   
  
  
  
  5.           userName:"鬼鬼"  
    6.   
  
  
  
  6.        })  
    7.   
  
  
  
  7.      } 
    8.   
  
  
  
  8.    } 
    9.   
  
  
  
  9. } 
    10.

使用方式二

 
 
 
 
    
  
  
  
  
  1.  
    2.  
 
 
 
 
 
 
 
    
  
  
  
  
  1. import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' 
    2.   
  
  
  
  2. export default { 
    3.   
  
  
  
  3.   methods: { 
    4.   
  
  
  
  4.     ...mapActions(['setUserInfo']), 
    5.   
  
  
  
  5.     // ...mapMutations(["setUserInfo"]), 
    6.   
  
  
  
  6.     setInfo(){ 
    7.   
  
  
  
  7.       this.setUserInfo({ 
    8.   
  
  
  
  8.          userName:"鬼鬼"  
    9.   
  
  
  
  9.      }) 
    10.   
  
  
  
  10.   }, 
    11.   
  
  
  
  11.   computed: { 
    12.   
  
  
  
  12.     ...mapState({  
    13.   
  
  
  
  13.         userInfo: state => state.userInfo 
    14.   
  
  
  
  14.      }), 
    15.   
  
  
  
  15.     ...mapGetters(['userName']), 
    16.   
  
  
  
  16.   } 
    17.   
  
  
  
  17. } 
    18.

本文轉(zhuǎn)載自微信公眾號(hào)「前端人」，作者鬼哥。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端人公眾號(hào)。


網(wǎng)頁標(biāo)題：我們一起看看Vuex使用流程是什么樣的?
轉(zhuǎn)載來源：http://m.5511xx.com/article/djocojj.html