vuex使用

什么是 Vuex

Vuex 是一个专为 Vue.js 应用开发的 状态管理模式 , 它可以集中管理应用所有组件的状态。我们经常会遇到多个组件共享状态的情况，以我们前面注册的用户信息为例，登录注册入口要使用这个用户信息，来判断是否显示用户名，这就需要我们在注册成功时，以某种方式通知登录注册入口，用户信息已经改变，使用 Vuex 不但可以轻松的实现通知，还可以在状态改变后响应式的反应到我们的界面上。

安装 Vuex

> npm install vuex --save

创建 store

在 src 新建 store 文件夹，然后新建 index.js 文件，复制贴入以下代码：

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import ls from '../utils/localStorage'
import router from '../router'

Vue.use(Vuex)

const state = {//// 用户信息，初始值从本地 localStorage 获取
  user: ls.getItem('user')
}

const mutations = {
  UPDATE_USER(state, user) {
    state.user = user// 改变 user 的值
    ls.setItem('user', user)// 将改变后的值存入 localStorage
//上面的 UPDATE_USER 是事件类型名称，大写不是必须的，后期可以使用常量代替事件类型。参数 state 是当前仓库的 state，user 是用户传入的参数，多参数的时候应该使用一个对象。

  }
}

const actions = {
  login({ commit }, user) {//// 登录时有传用户信息，就更新下用户信息
    if (user) commit('UPDATE_USER', user)
    router.push('/')//// 跳转到首页
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

我们使用 new Vuex.Store 创建了一个新的 store（仓库）实例，其配置项说明：

• state：共享的状态，我们不能直接更改状态，但是可以像 store.state.user 这样访问一个状态；
• mutations：更改状态的方法，我们可以在这里更改状态，调用方法是像 store.commit('UPDATE_USER', user) 这样提交一个事件类型，这里不能包含异步操作；
• actions：类似于 mutations，但我们不在这里直接更改状态，而是提交前面的 mutation，调用方法是像 store.dispatch('login') 这样分发一个事件，这里可以包含异步操作；

<!-- 字符串 -->
<router-link to="/">Home</router-link>

<!-- 含路径的对象 -->
<router-link :to="{ path: '/' }">Home</router-link>

<!-- 含命名的对象 -->
<router-link :to="{ name: 'Home' }">Home</router-link>

<!-- 含参数和查询参数的对象 -->
<router-link :to="{ params: { id: 1 }, query: { page: 1 } }">Home</router-link>

引入 store

打开 src/main.js 文件，引入并注入 store（单行注释部分是涉及的修改）:

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import './directives'
import './components'
// 引入 store/index.js 的默认值
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  // 注入 store
  store,
  components: { App },
  template: '<App/>'
})

我们通过 store 选项，将仓库实例注入到每一个子组件中，这样子组件就能通过 this.$store 访问仓库。

修改注册逻辑

打开 src/views/auth/Register.vue 文件，修改注册的逻辑：

src/views/auth/Register.vue

// 修改
const localUser = ls.getItem('user')
// 为 => 从仓库获取用户信息
const localUser = this.$store.state.user

// 修改
ls.setItem('user', user)
// 为 => 分发 login 事件，以保存用户信息和登录
this.$store.dispatch('login', user)