[[402869]]

一、使用Vuex的目的

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

二、Vuex 的五大核心

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

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

使用流程

1.創(chuàng)建store實例并且導出 store.js

import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex) 
const store = new Vuex.Store({ 
    //聲明state 
    state: {  
      userInfo:{ userName:"" } 
    },        
    //聲明mutations 
    mutations: { 
      setUserInfo(state,userInfo){   
        state.userInfo = userInfo 
      } 
    },    
    //聲明actions 
    actions: { 
      setUserInfo({ commit },userInfo){ 
        commit('setUserInfo',userInfo) 
      } 
    },     
    //聲明getters 
    getters:{ 
      userName(state){ 
        return "姓名："+state.userInfo.userName 
      } 
    } 
}) 
export default store 

2.引入Vuex

import Vue from 'vue' 
import App from './App.vue' 
import store from './store' 
new Vue({ 
  render: h => h(App), 
  store 
}).$mount('#app') 

3.組件內使用

使用方式一

<template> 
 <div> 
     <!-- state使用 --> 
     <p>{{$store.state.userInfo.userName}}</p> 
     <!-- getters使用 --> 
     <p>{{$store.getters.userName}}</p> 
     <!-- action使用 --> 
     <p @click="setInfo">存儲信息</p> 
 </div> 
</template> 

export default { 
   methods: { 
      setInfo(){ 
        this.$store.commit('setUserInfo',{ 
          userName:"鬼鬼"  
       })  
     } 
   } 
} 

使用方式二

<template> 
 <div> 
     <!-- state使用 --> 
     <p>{{userInfo.userName}}</p> 
     <!-- getters使用 --> 
     <p>{{userName}}</p> 
     <!-- action使用 --> 
     <p @click="setInfo">存儲信息</p> 
 </div> 
</template> 

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' 
export default { 
  methods: { 
    ...mapActions(['setUserInfo']), 
    // ...mapMutations(["setUserInfo"]), 
    setInfo(){ 
      this.setUserInfo({ 
         userName:"鬼鬼"  
     }) 
  }, 
  computed: { 
    ...mapState({  
        userInfo: state => state.userInfo 
     }), 
    ...mapGetters(['userName']), 
  } 
} 

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