在Vue项目中使用Vuex
首先在src下建立store文件夹:目录如下
index.js:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 })
mutation-types.js:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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')
记录自己的采坑之路,需要时方便查找