av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

我們一起看看Vuex使用流程是什么樣的?

一、使用Vuex的目的

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

二、Vuex 的五大核心

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

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

使用流程

1.創(chuàng)建store實例并且導出 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.組件內使用

使用方式一

 
 
 
 
    
  
  
  
  
  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.

本文轉載自微信公眾號「前端人」，作者鬼哥。轉載本文請聯(lián)系前端人公眾號。


文章名稱：我們一起看看Vuex使用流程是什么樣的?
網(wǎng)站URL：http://uogjgqi.cn/article/djocojj.html
掃二維碼與項目經(jīng)理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術咨詢/運營咨詢/技術建議/互聯(lián)網(wǎng)交流