在Vue项目中使用Vuex

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

index.js:

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 import mutations from './mutations'
 4 import actions from './action'
 5 
 6 Vue.use(Vuex)
 7 
 8 const state = {
 9   latitude: '', // 当前位置纬度
10   longitude: '', // 当前位置经度
11   cartList: {}, // 加入购物车的商品列表
12   shopDetail: null, //商家详情信息
13   userInfo: null, //用户信息
14   shopid: null, //商铺id
15   remarkText: null, //可选备注内容
16   inputText: '', //输入备注内容
17   invoice: false, //开发票
18   newAddress: [], //确认订单页新的地址
19   searchAddress: null, //搜索并选择的地址
20   geohash: '31.22299,121.36025', //地址geohash值
21   choosedAddress: null, //选择地址
22   addressIndex: null, //选择地址的索引值
23   needValidation: null, //确认订单时是否需要验证
24   cartId: null, //购物车id
25   sig: null, //购物车sig
26   orderParam: null, //订单的参数
27   orderMessage: null, //订单返回的信息
28   orderDetail: null, //订单详情
29   login: true, //是否登录
30   imgPath: null, //头像地址
31   removeAddress: [], //移除地址
32   addAddress: '', //新增地址
33   question: null, //问题详情
34   cartPrice: null, //会员卡价格
35 }
36 
37 export default new Vuex.Store({
38   state,
39   actions,
40   mutations,
41 })

View Code

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'

View Code

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)
  },
}

View Code

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
  },
}

View Code

项目入口文件，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')

View Code