（8）新增Vuex支援

阿新 • • 發佈：2021-06-04

2019獨角獸企業重金招聘Python工程師標準>>>

#（8）新增Vuex支援

1 安裝

cnpm install --save vuex

2 引入

2.1 `/src/store/index.js`

新建/src/store/目錄，用於存放Vuex模組內容

2.1.1 模組化

由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割

/src/store/目錄下新建modules目錄，新建common.js與user.js兩個檔案。

common.js:

export default {
    // 預設情況下，模組內部的 action、mutation 和 getter 是註冊在全域性名稱空間的
    // ——這樣使得多個模組能夠對同一 mutation 或 action 作出響應。
    // 如果希望你的模組具有更高的封裝度和複用性，你可以通過新增 namespaced: true 的方式
    // 使其成為帶名稱空間的模組。當模組被註冊後，它的所有 getter、action 及 mutation 都會
    // 自動根據模組註冊的路徑調整命名。
    namespaced: true,
    state:{
        // 頁面文件可視高度(隨視窗改變大小)
        documentClientHeight: 0,
        // 導航條, 佈局風格, defalut(預設) / inverse(反向)
        navbarLayoutType: 'default',
        // 側邊欄, 佈局面板, light(淺色) / dark(黑色)
        sidebarLayoutSkin: 'dark',
        // 側邊欄, 摺疊狀態
        sidebarFold: false,
        // 側邊欄, 選單
        menuList: [],
        menuActiveName: '',
        // 主入口標籤頁
        mainTabs: [],
        mainTabsActiveName: ''
    },
    mutation:{
        updateDocumentClientHeight (state, height) {
            state.documentClientHeight = height
        },
        updateNavbarLayoutType (state, type) {
            state.navbarLayoutType = type
        },
        updateSidebarLayoutSkin (state, skin) {
            state.sidebarLayoutSkin = skin
        },
        updateSidebarFold (state, fold) {
            state.sidebarFold = fold
        },
        updateMenuList (state, list) {
            state.menuList = list
        },
        updateMenuActiveName (state, name) {
            state.menuActiveName = name
        },
        updateMainTabs (state, tabs) {
            state.mainTabs = tabs
        },
        updateMainTabsActiveName (state, name) {
            state.mainTabsActiveName = name
        }
    }
}

user.js:

export default {
  namespaced: true,
  state: {
    id: 0,
    name: '',
    employeename: ''
  },
  mutations: {
    updateId (state, id) {
      state.id = id
    },
    updateName (state, name) {
      state.name = name
    },
    updateEmployeename (state, employeename) {
      state.employeename = employeename
    }
  }
}

2.1.2 `index.js`引入

/src/store/目錄下新建index.js檔案

import Vue from 'vue'
import Vuex from 'vuex'
import common from './modules/common'
import user from './modules/user'
//Vuex 通過 store 選項，提供了一種機制將狀態從根元件“注入”到每一個子元件中（需呼叫 Vue.use(Vuex)）
Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
        common,
        user
    }
})

2.2 `main.js`中引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import '@/element-ui'                         // api: https://github.com/ElemeFE/element
import '@/element-ui-theme'
import '@/assets/scss/index.scss'
import '@/icons'                              // api: http://www.iconfont.cn/
import router from '@/router'                 // api: https://github.com/vuejs/vue-router
import store from '@/store'                   // api: https://github.com/vuejs/vuex
import VueCookie from 'vue-cookie'            // api: https://github.com/alfhen/vue-cookie
import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios


Vue.config.productionTip = false
Vue.use(router)
Vue.use(VueCookie)

Vue.prototype.$http = httpRequest

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//Vuex 通過 store 選項，提供了一種機制將狀態從根元件“注入”到每一個子元件中（需呼叫 Vue.use(Vuex)）
  components: { App },
  template: '<App/>'
})