Vue实战之Vuex状态管理

简介

Vuex 是一个专为 Vue.js 应用开发的 状态管理模式 , 它可以集中管理应用所有组件的状态

使用

• 安装vuex npm install vuex --save
• 创建 store

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

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

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

const actions = {
  login({ commit }, user) {
    // 登录时有传用户信息，就更新下用户信息
    if (user) commit('UPDATE_USER', user)
    // 跳转到首页
    router.push('/')
  }
}
action 的第一个参数是一个与仓库实例具有相同方法和属性的 context 对象，可以从 context.state 访问仓库的 state，使用 context.commit 提交一个事件类型。可以在第一个参数使用参数解构来简化代码，如 { commit }。

不使用参数解构的 actions：

const actions = {
  login(context, user) {
    if (user) context.commit('UPDATE_USER', user)
    router.push('/')
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})
我们使用 new Vuex.Store 创建了一个新的 store（仓库）实例，其配置项说明：

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

• 入口js文件引入 store 并注入 store

组件内怎么访问 store

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