Vue-CLI3.0项目搭建过程系列二：项目中vuex应用

系列一中我们安装配置了项目常用的一些插件，接下来是vuex在项目中的应用

vuex官网解释如下

目前我写过的项目中vuex主要是用来存放用户的信息和登录状态、权限相关等，仅在本文中介绍用法。

src文件夹下新建store文件夹-》新建index.js文件

然后main.js文件中引入：

import store from './store'

并

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

接下来我们开始写store

为了便于管理项目在store文件夹下新建modules用于存放不同模块的状态

项目中常用的比如用户信息用来放登录用户相关

modules下新建user.js

const user = {
    state: {
        currentUser: '',
        isLogin: false
    },
    getters: {
        currentUser: state => state.currentUser,
        isLogin: state => state.isLogin
    },
    mutations: {
        userStatus(state, user) {
            if (user) {
                state.currentUser = user
                state.isLogin = true
            } else {
                state.currentUser = null
                state.isLogin = false
            }
        }
    },
    actions: {
        setUser({commit}, user) {
            commit('userStatus', user)
        }
    }
}

export default user

在store=》index.js文件中引入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: { user }
})

export default store

这样在项目里我们可以随时拿到有关用户的信息和当前登录状态并对其进行修改

获取的方法：

import store from './../store'
// 然后
store.getters.currentUser

或者

this.$store.getters.currentUser

修改当前用户方法：

import store from './../store'
// 然后
store.dispatch('setUser', 'liona')

或者

import {mapActions} from 'vuex'
然后
methods: {
         ...mapActions(['setUser'])//数组里可以放多个
         }
修改的时候就可以用
this.setUser('newName')