vuex知識(shí)

一、簡(jiǎn)單介紹

1.定義：在Vue中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè)Vue插件，對(duì)vue應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫(xiě)），也是一種組件間通信的方式，且適用于任意組件間通信。多個(gè)組件需要共享數(shù)據(jù)時(shí)使用。
??一般情況下，我們會(huì)在 Vuex 中存放一些需要在多個(gè)界面中進(jìn)行共享的信息。比如用戶的登錄狀態(tài)、用戶名稱、頭像、地理位置信息、商品的收藏、購(gòu)物車(chē)中的物品等，這些狀態(tài)信息，我們可以放在統(tǒng)一的地方，對(duì)它進(jìn)行保存和管理。
2.搭建vuex環(huán)境
（1）安裝Vuex 插件

npm install --save vuex@3

（2）創(chuàng)建文件：src/store/index.js
（3）在index.js中引入并且使用倉(cāng)庫(kù)

import Vuex from 'vuex';
 Vue.use(Vuex)；

（4）引入組件小倉(cāng)庫(kù)

import home from './home';

（5）對(duì)外暴露倉(cāng)庫(kù)，注冊(cè)小倉(cāng)庫(kù)

export default new Vuex.Store({
   modules: {
          home}
})

總倉(cāng)庫(kù)寫(xiě)法：

//大倉(cāng)庫(kù)
import Vuex from 'vuex';
import Vue from 'vue';
//安裝插件
Vue.use(Vuex);

//引入小倉(cāng)庫(kù)
import home from './home';
import search from './search';
//對(duì)外暴露倉(cāng)庫(kù)
//第一個(gè)注意:需要關(guān)鍵字new，你沒(méi)有new會(huì)報(bào)錯(cuò)的
//第二個(gè)注意:Store構(gòu)造函數(shù),書(shū)寫(xiě)的時(shí)候別小寫(xiě)
export default new Vuex.Store({
    //大倉(cāng)庫(kù)需要注冊(cè)全部小倉(cāng)庫(kù)
    //vuex新增的一個(gè)配置項(xiàng):模塊式開(kāi)發(fā).右側(cè)V也是對(duì)象
    modules: {
        home,
        search,
  }
})

小倉(cāng)庫(kù)寫(xiě)法:

//引入Vue核心庫(kù)
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //應(yīng)用Vuex插件
   Vue.use(Vuex)

   //準(zhǔn)備state對(duì)象——保存具體的數(shù)據(jù)
   const state = {}
   //準(zhǔn)備mutations對(duì)象——修改state中的數(shù)據(jù)
   const mutations = {}
   //準(zhǔn)備actions對(duì)象——響應(yīng)組件中用戶的動(dòng)作,異步操作
   const actions = {} 
    //準(zhǔn)備getters對(duì)象——獲取數(shù)據(jù)并渲染，數(shù)據(jù)簡(jiǎn)化
   const getters = {};

   //創(chuàng)建并暴露store
   export default new Vuex.Store({
    actions,
    mutations,
    state
   })

（6）在 main.js 文件中掛載使用

//注冊(cè)倉(cāng)庫(kù)功能
import store from './store';
//創(chuàng)建vm
   new Vue({
    el:'#app',
    render: h => h(App),
    store
   })

二、基本使用

1.初始化數(shù)據(jù)
配置actions、配置mutations，操作文件store/index.js
代碼實(shí)現(xiàn)：

 //引入Vue核心庫(kù)
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
   
   const actions = {
       //響應(yīng)組件中加的動(dòng)作
    jia(context,value){
        // console.log('actions中的jia被調(diào)用了',miniStore,value)
        context.commit('JIA',value)
    },
   }
   
   const mutations = {
       //執(zhí)行加
    JIA(state,value){
        // console.log('mutations中的JIA被調(diào)用了',state,value)
        state.sum += value
    }
   }
   
   //初始化數(shù)據(jù)
   const state = {
      sum:0
   }
   
   //創(chuàng)建并暴露store
   export default new Vuex.Store({
    actions,
    mutations,
    state,
   })

2.組件中讀取vuex中的數(shù)據(jù)（較少用）

 //對(duì)應(yīng)的vue文件下
$store.state.sum

3. 組件中修改vuex中的數(shù)據(jù)

$store.dispatch('action中的方法名',數(shù)據(jù))
 或 $store.commit('mutations中的方法名',數(shù)據(jù))（了解）

三、vuex輔助函數(shù)的使用

1.mapState方法：用于幫助我們映射state中的數(shù)據(jù)為計(jì)算屬性

vue組件中
//利用輔助函數(shù)獲取倉(cāng)庫(kù)state數(shù)據(jù)
import { mapState } from "vuex";
computed: {
       //借助mapState生成計(jì)算屬性：sum、school、subject（對(duì)象寫(xiě)法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成計(jì)算屬性：sum、school、subject（數(shù)組寫(xiě)法）
       ...mapState(['sum','school','subject']),
   }

2.mapGetters方法:用于幫助我們映射getters中的數(shù)據(jù)為計(jì)算屬性

import { mapGetters } from "vuex";
computed: {
       //借助mapGetters生成計(jì)算屬性：bigSum（對(duì)象寫(xiě)法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成計(jì)算屬性：bigSum（數(shù)組寫(xiě)法）
       ...mapGetters(['bigSum'])
   }

3.mapActions方法：用于幫助我們生成與actions對(duì)話的方法，即：包含$store.dispatch(xxx)的函數(shù) （了解）

import { mapActions } from "vuex";
methods:{
       //靠mapActions生成：incrementOdd、incrementWait（對(duì)象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（數(shù)組形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }

4.mapMutations方法：用于幫助我們生成與mutations對(duì)話的方法，即：包含$store.commit(xxx)的函數(shù) （了解）

import { mapMutations } from "vuex";
methods:{
       //靠mapActions生成：increment、decrement（對(duì)象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（對(duì)象形式）
       ...mapMutations(['JIA','JIAN']),
   }

備注：mapActions與mapMutations使用時(shí)，若需要傳遞參數(shù)需要：在模板中綁定事件時(shí)傳遞好參數(shù)，否則參數(shù)是事件對(duì)象。

四、模塊化+命名空間 （了解）

  1. 目的：優(yōu)化，提高復(fù)用性，讓代碼更好維護(hù)，讓多種數(shù)據(jù)分類更加明確。
  2. 修改store.js 
javascript
   const countAbout = {
     namespaced:true,//開(kāi)啟命名空間
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//開(kāi)啟命名空間
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })

  1. 開(kāi)啟命名空間后，組件中讀取state數(shù)據(jù)：

    //方式一：自己直接讀取
this.$store.state.personAbout.list
//方式二：借助mapState讀?。?...mapState('countAbout',['sum','school','subject']),

  2. 開(kāi)啟命名空間后，組件中讀取getters數(shù)據(jù)：

    //方式一：自己直接讀取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters讀?。?...mapGetters('countAbout',['bigSum'])

  3. 開(kāi)啟命名空間后，組件中調(diào)用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  4. 開(kāi)啟命名空間后，組件中調(diào)用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Vuex知識(shí)整理 state 用來(lái)數(shù)據(jù)共享數(shù)據(jù)存儲(chǔ) mutation 用來(lái)注冊(cè)改變數(shù)據(jù)狀態(tài) getters 用來(lái)對(duì)...
    Chen陳渣渣渣紹閱讀 487評(píng)論 0贊 0
  • vuex是一個(gè)專門(mén)為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)，——數(shù)據(jù)倉(cāng)庫(kù)。 狀態(tài)：在這可以理解為在data中的屬性需...
    晏子小七閱讀 245評(píng)論 0贊 0
  • Vuex 是什么？ ** 官方解釋：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式**。它采用集中...
    Rz______閱讀 2,360評(píng)論 1贊 10
  • 學(xué)前準(zhǔn)備 本文主要內(nèi)容來(lái)源于官網(wǎng)，為Vuex的基礎(chǔ)部分總結(jié)，部分案例也參考了互聯(lián)網(wǎng)上其他分享知識(shí)的大佬。本手記結(jié)合...
    橙色流年閱讀 407評(píng)論 0贊 1
  • 一、安裝和使用 創(chuàng)建一個(gè)store/index.js文件安裝vuex并導(dǎo)出store 在main.js中注入sto...
    燈光樹(shù)影閱讀 331評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容