如何搭建Vuex環境

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

1. 概念

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

2. 工作流程

備注：若沒有網絡請求或其他業務邏輯，組件中也可以越過actions，即不寫dispatch，直接commit

3. 安裝

npm i vuex //安裝

4. 搭建Vuex環境

在main.js文件中創建Vue時傳入store配置項

import Vue from 'vue'

import App from './App.vue'

import store from './store'

new Vue({

    el:'app',

    render: h => h(App),

    store,

})

創建store/index.js文件

import Vue from 'vue'

import Vuex from 'vuex' //引入

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

//創建Vuex中最核心的store

const action = {} //用于響應組件中的動作

const mutations = {} //用于操作數據

const state = {} //用于存儲數據

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

//創建并暴露store

export default new Vuex.Store({

    action,

    mutations,

    state,

    getters,

})

5. 基本使用

import Vue from 'vue'

import Vuex from 'vuex' //引入

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

//創建Vuex中最核心的store

const action = {

    showName(context,value){

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

    }

}

/*

context:{

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

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

commit,   等同于store.$commit

dispatch,   等同于store.$dispatch

getters   等同于store.$getters

}

常規寫法調用的時候會使用context.commit，但更多的是使用es6的變量解構賦值，也就是直接在參數的

位置寫自己想要的屬性，如：{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'

    }

}

//創建并暴露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')調用action；

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

6. 借助map使用

6.1 mapState和mapGetters

import {mapState，mapGetters} from 'vuex'

export default {

    data(){return {}},

    computed:{

        //借助mapState生成計算屬性，從state中讀取數據

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

        /* 

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

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

        */

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

        /* 

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

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

        */

        //借助mapGetters生成計算屬性，從getters中讀取數據

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

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

       /*

          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)的函數

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

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

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

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

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

    }

}

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

7. 模塊化

一些規則：

應用層級的狀態應該集中到單個 store 對象中。

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

異步邏輯都應該封裝到 action 里面。

├── index.html

├── main.js

├── api

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

├── components

│   ├── App.vue

│   └── ...

└── store

    ├── index.js          # 我們組裝模塊并導出 store 的地方

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

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

    └── modules

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

        └── products.js   # 產品模塊

關于“如何搭建Vuex環境”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“如何搭建Vuex環境”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。