基本vuex

store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 公共state对象，存储所有组件的状态
  state: {
    user: {
      name: '',
      age: ''
    }
  },
  // 唯一取值的方法，计算属性
  getters: {
    getUser(state) {
      return state.user
    }
  },
  // 唯一可以修改state值的方法，同步阻塞
  mutations: {
    updateUser(state, user) {
      state.user = user
    }
  },
  // 异步调用mutations方法
  actions: {
    asyncUpdateUser(context, user) {
      context.commit('updateUser', user)
    }
  },
  modules: {
  }
})

组件中使用

//state中的数据
{{ $store.state.user }}

//getters中的数据
{{ $store.getters.getUser.name }}

// mutations方法使用commit调用
 this.$store.commit('updateUser',{
        name: 66,
        age: 88,
      })

// actions方法使用dispatch调用
 this.$store.dispatch("asyncUpdateUser", {
        name: this.name,
        age: this.age,
      });

模块化 

//user.js
const user = {
    /* 命名空间，打开之后，调用方法时：this.$store.commit('user/updateUser',{
       name: 66,
      age: 88,
      }) */
    namespaced: true,
    // 公共state对象，存储所有组件的状态
    state: null != window.sessionStorage.getItem('state') ? JSON.parse(window.sessionStorage.getItem('state')) : {
        user: {
            name: '',
            age: ''
        }
    },
    // 唯一取值的方法，计算属性
    getters: {
        getUser(state) {
            return state.user
        }
    },
    // 唯一可以修改state值的方法，同步阻塞
    mutations: {
        updateUser(state, user) {
            state.user = user
        }
    },
    // 异步调用mutations方法
    actions: {
        asyncUpdateUser(context, user) {
            context.commit('updateUser', user)
        }
    },
}

export default user;


//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user.js'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})

注：本文参考小破站up主“码歌”视频教程，整理得来。