og

简单讲讲Vuex

Snipaste_20211116_170542.jpg 这几天意外的发现我那故步自封的同事用上了我当初建项目时配的Vuex,单页面的很大一部分精髓也在vuex上了。今天顺便就简单的说说怎么用vuex吧。

这里就讲一个实际需求。

需求

需要一个购物车常驻的底部悬浮显示信息 Snipaste_20211116_153422.jpg

分析

首先需要做一个组件,价格可以用组件的属性传进去,或可以在加减事件触发时触发重新获取购物车的函数。但这样的就会造成每重新建个页面要复制写一遍,及其麻烦。那么就需要用上Vuex用来管理公共状态了。

Vuex使用

新建 store 目录,在此目录下新建 index.js 文件。在 index.js 文件配置如下:

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex);//vue的插件机制 //Vuex.Store 构造器选项 const store = new Vuex.Store({ state:{//存放状态 shopInfo:{},//购物车的一些信息 } getters: { //getter相当于一个计算属性,跟着state的变化而变化,比如这里我要获取的单个供应商的购物车信息,就根据对shopInfo处理。 shopcar_chain: (state) => (chain_id) => { return state.shopInfo.shopCart_list.find(item => item.chain_id === chain_id) } }, mutations: {//这个就是用来改变state的,通常可以用store.commit('SET_ShopInfo')来改变状态 SET_ShopInfo(state, shopInfo){ state.shopInfo = shopInfo } }, //action 提交的是 mutation,通过 mutation 来改变 state ,而不是直接变更状态。 actions: {//通常用于异步操作比如我这里的获取购物车信息实际是异步操作,所以用了actions来分发改变状态store.dispatch('get_shopInfo'),之后就可以将store.dispatch('get_shopInfo')放入加减操作的公共函数里 async get_shopInfo({commit}) { let shopInfo = await get_shopcartlist() commit('SET_ShopInfo',shopInfo) } } }) export default store

在 main.js 中导入文件。

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
import Vue from 'vue' import App from './App' import store from './store' Vue.prototype.$store = store // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件 const app = new Vue({ store, ...App }) app.$mount()

去购物车组件

        
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
import { mapState } from "vuex" export default { props: { chain_id: { type: String, default: '' } }, computed: { ...mapState({ //辅助函数 shopInfo: state => state.shopInfo, }), shopcar_chain() { return this.$store.getters.shopcar_chain(this.chain_id) || {} } }, watch: { chain_id(n, o) { //更换公司时重新获取信息 this.$store.dispatch('get_shopInfo') } }, created() { this.$store.dispatch('get_shopInfo') }, mounted() {}, methods: {} }

这里就粗略的讲下一个Vuex的例子,Vuex的用法在官方文档上写的很详细了。

---end---

Article at   2021/11/16 17:08  Published  code  Category,viewed  103  times

Relevant tags:    Vue 

Address:   https://www.kedong.me/article/62

Copyright Notice: Freely reproduced for non-commercial use