這篇文章主要介紹了如何搭建Vuex環(huán)境的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇如何搭建Vuex環(huán)境文章都會有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)是一家專業(yè)提供博白企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、成都做網(wǎng)站、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為博白眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

1. 概念

Vuex 是一個專為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。在龐大的項目中，能夠方便地集中式管理和維護組件之間頻繁傳遞的data中的值，也是組件之間通信的方式，適用于任意組件間通信。

2. 工作流程

備注：若沒有網(wǎng)絡(luò)請求或其他業(yè)務(wù)邏輯，組件中也可以越過actions，即不寫dispatch，直接commit

3. 安裝

npm i vuex //安裝

4. 搭建Vuex環(huán)境

在main.js文件中創(chuàng)建Vue時傳入store配置項

import Vue from 'vue'

import App from './App.vue'

import store from './store'

new Vue({

    el:'app',

    render: h => h(App),

    store,

})

創(chuàng)建store/index.js文件

import Vue from 'vue'

import Vuex from 'vuex' //引入

Vue.use(Vuex) //使用插件

//創(chuàng)建Vuex中最核心的store

const action = {} //用于響應(yīng)組件中的動作

const mutations = {} //用于操作數(shù)據(jù)

const state = {} //用于存儲數(shù)據(jù)

const getters = {} //可以認為是store的計算屬性,對state中的數(shù)據(jù)加工

//創(chuàng)建并暴露store

export default new Vuex.Store({

    action,

    mutations,

    state,

    getters,

})

5. 基本使用

import Vue from 'vue'

import Vuex from 'vuex' //引入

Vue.use(Vuex) //使用插件

//創(chuàng)建Vuex中最核心的store

const action = {

    showName(context,value){

        context.commit('SHOWNAME',value) //context上下文中包含store

    }

}

/*

context:{

state,   等同于store.$state，若在模塊中則為局部狀態(tài)

rootState,   等同于store.$state,只存在模塊中

commit,   等同于store.$commit

dispatch,   等同于store.$dispatch

getters   等同于store.$getters

}

常規(guī)寫法調(diào)用的時候會使用context.commit，但更多的是使用es6的變量解構(gòu)賦值，也就是直接在參數(shù)的

位置寫自己想要的屬性，如：{commit}。

*/

const mutations = {

    SHOWNAME(state,value){

        state.name = value //改變store中的name為hello

    }

}

const state = {

    name: 'hello Vuex',

    age: 25,

}

const getters = {

    upName(state){

        return state.name = 'HELLO VUEX'

    }

}

//創(chuàng)建并暴露store

export default new Vuex.Store({

    action,

    mutations,

    state,

    getters,

})

在組件中使用Vuex

在視圖(template)中，用 $store.state.name / this.$store.getters.upName ;

在腳本(script)中，用 this.$store.state.name / this.$store.getters.upName ;

用 this.$store.dispatch('showName','hello')調(diào)用action；

也可以直接用 this.$store.commit('SHOWNAME'，'hello')調(diào)用mutation。

6. 借助map使用

6.1 mapState和mapGetters

import {mapState，mapGetters} from 'vuex'

export default {

    data(){return {}},

    computed:{

        //借助mapState生成計算屬性，從state中讀取數(shù)據(jù)

        ...mapState({mingzi:'name',nianling:'age'})  //對象寫法

        /* 

          mingzi(){return this.$store.state.name}

         nianling(){return this.$store.state.name}

        */

        ...mapState(['name','age']) //數(shù)組寫法

        /* 

          name(){return this.$store.state.name}

          age(){return this.$store.state.name}

        */

        //借助mapGetters生成計算屬性，從getters中讀取數(shù)據(jù)

        ...mapGetters({upName:'upName'}) //對象寫法

        ...mapGetters(['upName']) //數(shù)組寫法

       /*

          upName(){return this.$store.getters.upName}

        */

    }

}

6.2 mapActions和mapMutations

import {mapActions，mapMutations} from 'vuex'

export default {

    data(){return {}},

    methods:{

        //借助mapActions生成actions方法，即包含this.$store.dispatch(xxx)的函數(shù)

        ...mapActions({showName:'showName'}) //對象寫法

        ...mapActions(['showName']) //數(shù)組寫法

        //借助mapMutations生成mutations方法，即包含this.$store.commit(xxx)的函數(shù)

        ...mapMutations({showName:'SHOWNAME'}) //對象寫法

        ...mapMutations(['SHOWNAME']) //數(shù)組寫法

    }

}

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

7. 模塊化

一些規(guī)則：

應(yīng)用層級的狀態(tài)應(yīng)該集中到單個 store 對象中。

提交 mutation 是更改狀態(tài)的唯一方法，并且這個過程是同步的。

異步邏輯都應(yīng)該封裝到 action 里面。

├── index.html

├── main.js

├── api

│   └── ... # 抽取出API請求

├── components

│   ├── App.vue

│   └── ...

└── store

    ├── index.js          # 我們組裝模塊并導(dǎo)出 store 的地方

    ├── actions.js        # 根級別的 action

    ├── mutations.js      # 根級別的 mutation

    └── modules

        ├── cart.js       # 購物車模塊

        └── products.js   # 產(chǎn)品模塊

關(guān)于“如何搭建Vuex環(huán)境”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“如何搭建Vuex環(huán)境”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前名稱：如何搭建Vuex環(huán)境
標題鏈接：http://jinyejixie.com/article4/jopjoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站策劃、App設(shè)計、企業(yè)建站、外貿(mào)建站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)