Vuex使用

Vuex是一个针对Vue.js开发的状态管理模式。就是一个工具，管理（修改或设置）所有组件用到的数据，而不需要借助event bus或props在组件间传值。

Vuex使用说明

vuex说明：

• 整个vuex的核心是一个Store，里面包含有state，mutaions，actions，getters。
• state是数据存储对象，需要存储的数据都可以存储在state中。
• mutations中存储操作State中数据的方法，可以直接通过commit进行调用，但是这种调用发生时同步的。
• actions存储了触发mutations中的函数的方法，通过dispatch可以调用actions中的方法，它是异步调用法师。

使用vuex：
下载：

npm install vuex -S

定义一个vuex模块

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

在main.js注入

// main.js
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(Counter)
})

例子：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 存储数据的对象
const state = {
  username: '',
  current: {}
}
// 存储着操作state数据的函数
const mutations = {
  // state:可以理解为state对象
  setUsername: (state, value) => {
    state.username = value
  }
}
// 存储着触发mutations中的函数的方法
const actions = {
  setUsernameAction: ({ commit }, value) => {
    commit('setUsername', value)
  }
}
// 访问器
const getters = {
  getUsername: (state) => {
    return state.username + 'aa'
  }
}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

使用：

// 将数据存储到vuex的state中
this.$store.state.username = res.data.data.username
// commit(mutations中的函数名称):同步调用方式:不建议使用
this.$store.commit('setUsername', res.data.data.username)
// 以异步的方式进行数据的处理
this.$store.dispatch('setUsernameAction', res.data.data.username)