在Vue项目中使用Vuex

首先在src下建立store文件夹：目录如下

 index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'

Vue.use(Vuex)

const state = {
  latitude: '', // 当前位置纬度
  longitude: '', // 当前位置经度
  cartList: {}, // 加入购物车的商品列表
  shopDetail: null, //商家详情信息
  userInfo: null, //用户信息
  shopid: null, //商铺id
  remarkText: null, //可选备注内容
  inputText: '', //输入备注内容
  invoice: false, //开发票
  newAddress: [], //确认订单页新的地址
  searchAddress: null, //搜索并选择的地址
  geohash: '31.22299,121.36025', //地址geohash值
  choosedAddress: null, //选择地址
  addressIndex: null, //选择地址的索引值
  needValidation: null, //确认订单时是否需要验证
  cartId: null, //购物车id
  sig: null, //购物车sig
  orderParam: null, //订单的参数
  orderMessage: null, //订单返回的信息
  orderDetail: null, //订单详情
  login: true, //是否登录
  imgPath: null, //头像地址
  removeAddress: [], //移除地址
  addAddress: '', //新增地址
  question: null, //问题详情
  cartPrice: null, //会员卡价格
}

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

mutation-types.js:

export const RECORD_ADDRESS = 'RECORD_ADDRESS'
export const ADD_CART = 'ADD_CART'
export const REDUCE_CART = 'REDUCE_CART'
export const INIT_BUYCART = 'INIT_BUYCART'
export const CLEAR_CART = 'CLEAR_CART'
export const RECORD_SHOPDETAIL = 'RECORD_SHOPDETAIL'
export const RECORD_USERINFO = 'RECORD_USERINFO'
export const GET_USERINFO = 'GET_USERINFO'
export const CONFIRM_REMARK = 'CONFIRM_REMARK'
export const CONFIRM_INVOICE = 'CONFIRM_INVOICE'
export const CHOOSE_SEARCH_ADDRESS = 'CHOOSE_SEARCH_ADDRESS'
export const SAVE_GEOHASH = 'SAVE_GEOHASH'
export const CONFIRM_ADDRESS = 'CONFIRM_ADDRESS'
export const CHOOSE_ADDRESS = 'CHOOSE_ADDRESS'
export const NEED_VALIDATION = 'NEED_VALIDATION'
export const SAVE_CART_ID_SIG = 'SAVE_CART_ID_SIG'
export const SAVE_ORDER_PARAM = 'SAVE_ORDER_PARAM'
export const CHANGE_ORDER_PARAM = 'CHANGE_ORDER_PARAM'
export const ORDER_SUCCESS = 'ORDER_SUCCESS'
export const SAVE_SHOPID = 'SAVE_SHOPID'
export const SAVE_ORDER = 'SAVE_ORDER'
export const OUT_LOGIN = 'OUT_LOGIN'
export const RETSET_NAME = 'RETSET_NAME'
export const SAVE_AVANDER = 'SAVE_AVANDER'
export const SAVE_ADDDETAIL = 'SAVE_ADDDETAIL'
export const SAVE_ADDRESS = 'SAVE_ADDRESS'
export const SAVE_QUESTION = 'SAVE_QUESTION'
export const ADD_ADDRESS = 'ADD_ADDRESS'
export const BUY_CART = 'BUY_CART'

action.js:

import { getUser, getAddressList } from '../service/getData'
import { GET_USERINFO, SAVE_ADDRESS } from './mutation-types.js'

export default {
  async getUserInfo({ commit }) {
    let res = await getUser()
    commit(GET_USERINFO, res)
  },

  async saveAddress({ commit, state }) {
    if (state.removeAddress.length > 0) {
      return
    }
    let address = await getAddressList(state.userInfo.user_id)
    commit(SAVE_ADDRESS, address)
  },
}

mutations.js: 

import { GET_USERINFO, SAVE_ADDRESS } from './mutation-types.js'

// import { setStore, getStore } from '../config/mUtils'

// import { localapi, proapi } from 'src/config/env'

export default {
  // 获取用户信息存入vuex
  [GET_USERINFO](state, info) {
    if (status.userInfo && state.userInfo.username !== info.username) {
      return
    }
    if (!state.login) {
      return
    }
    if (!info.message) {
      state.userInfo = { ...info }
    } else {
      state.userInfo = null
    }
  },

  // 删除地址列表
  [SAVE_ADDRESS](state, newAdress) {
    state.removeAddress = newAdress
  },
}

项目入口文件，main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import store from './store/'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(VueRouter)
const router = new VueRouter({
  routes,
  mode: 'hash',
  strict: process.env.NODE_ENV !== 'production',
})

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