記一次vue+vuex+vue-router+axios+elementUI開發（三）

項目用到了狀態管理工具 Vuex  中文文檔： https://vuex.vuejs.org/zh/guide/

大家都知道，vue中可用props將父組件的數據傳遞給子組件，但是有個問題，子組件一般不能修改父組件的數據，這時候vuex就派上用場

1、vuex 安裝：npm install vuex --save

2、在src中新建一個store文件夾：本人目錄結構如下：

　3、在main.js 中引入：

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

　4、這里用到了vuex的modules

在store文件夾中的index.js 中引入modules中的模塊，並導入到store中

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import account from './modules/account'
import user_list from './modules/userList'
import nav_router from './modules/navRouter'




Vue.use(Vuex)

// const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  modules: {
    user,
    account,
    user_list,
    nav_router,
  },
  // strict: debug,
})

5、modules 中的文件：

包含state、getter、actions、mutations。這里就不一一介紹了，文檔里都有用法以及介紹。

import api from 'api/fetch'
import * as types from '../types'



const state = {
    token: '',
    userName: localStorage.getItem('userName') ? localStorage.getItem('userName') : '',
    role_id: sessionStorage.getItem('role_id') ? sessionStorage.getItem('role_id') : '',
}


const getters = {
    userName: state => {
        return state.userName
    },
    roleId: state => state.role_id
}

const actions = {
    userLogin({ commit }, palyload) {
        return api.Login(palyload)
            .then( res => {
                localStorage.setItem('user_token_key', res.data.token)
                localStorage.setItem('userName', res.data.username)
                sessionStorage.setItem('role_id', res.data.role_id)
                commit(types.USER, res.data)
                return res
            })
    }
}


const mutations = {
    [types.USER](state, datas) {
        state.userName = datas.username
        state.token = datas.token
        state.role_id = datas.role_id
    }
}



export default {
    state,
    getters,
    actions,
    mutations,
}

6、在組件中如何獲取vuex中的數據呢或者怎么觸發vuex的鈎子呢，以state為列子。

　　本人在vue組件中獲取state，主要用2中方式

　　1、vuex提供的mapState： 在組件中

　　　　

import { mapState } from 'vuex'

computed: {
            ...mapState({
                totalItem: state => state.user_list.user_list_totalItem,
                user_list_loading: state => state.user_list.user_list_loading,
            })
        },

　　2、在組件中用this.$store.user.state 訪問（這里要注意用了modules 之后要在user modules上訪問state，否則訪問的為undefined）

　　3、其他的鈎子都有對應的觸發方式，可前往文檔中了解