域名网站备案管理系统,微信如何建商城网站,wordpress是什么程序,做英文网站用什么源码vuex的学习笔记#xff0c;很多地方还都不是很懂#xff0c;先记下来再说#xff0c;比小程序里自带的store复杂很多#xff0c;看着头大#xff0c;而且方法里面很多ES6的内容#xff0c;头都看到爆炸
一、初始化vuex
新建store.js#xff0c;挂载到main.js
1、在根…vuex的学习笔记很多地方还都不是很懂先记下来再说比小程序里自带的store复杂很多看着头大而且方法里面很多ES6的内容头都看到爆炸
一、初始化vuex
新建store.js挂载到main.js
1、在根目录下创建 store 文件夹用来存放 vuex 相关的模块
2、在 store 中新建 store.js 文件
3、在 store.js 中初始化 Store 的实例对象
//1.导入Vue和Vuex
import Vue from vue
import Vuex from vuex
//2.将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)
// 3.创建 Store 的实例对象
const store new Vuex.Store({// 挂载 store 模块modules: { }
})
// 4.向外共享 Store 的实例对象
export default store
4、在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上
// 1、 导入 store 的实例对象
import store from /store/store.js
const app new Vue({...App,// 2、 将 store 挂载到 Vue 实例上store
})
app.$mount() 二、创建 store 模块
新建 cart.js 挂载到 store.js
1、在 store 文件夹中新建 cart.js 文件
2、在 cart.js 中初始化 vuex 模块
export default {namespaced: true,state: () ({// 购物车的数组用来存储购物车中每个商品的信息对象// 每个商品的信息对象都包含如下6个属性// { goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state }cart: []}),mutations: {},getter: {}
}3、在 store.js 中导入并挂载 购物车cart的 vuex 模块
import Vue from vue
import Vuex from vuex
// 1、导入购物车cart的 vuex 模块
import moduleCart from /store/cart.jsVue.use(Vuex)const store new Vuex.Store({modules: {// 2、挂载购物车的 vuex 模块模块内成员的访问路径被调整为 m_cart 例如// 购物车模块中 cart 数组的访问路径是 m_cart/cartm_cart: moduleCart}
})export default store
三、使用 store 中的数据
导入 vuex 的方法把数据作为计算属性使用
1、使用state
定义时的数据样本 state: () ({cart: []}), 使用辅助方法按需导入 import { mapState } from vuex 在计算属性里面展开 computed: {// 调用 mapState 方法 把m_cart 模块中的 cart 数组映射到当前页面中作为计算属性来使用// ...mapSate(模块的名称,[要映射的模块里的数据名称])...mapState(m_cart, [cart])},
然后就可以直接使用
view{{cart.length!0 ? cart[0].goods_name : 0}}/view
2、使用 Mutations
首先也是导入 import { mapState,mapMutations } from vuex 然后在methods中使用辅助方法按需导入
就可以像普通方法一样使用 methods: {...mapMutations(m_cart, [addToCart]),// 右侧按钮的点击事件处理函数buttonClick(e) {//1.判断是否点击了 加入购物车 按钮if (e.content.text 加入购物车) {// 2、组织一个商品的信息对象const goods {goods_id: this.goods_info.goods_id, //商品的Idgoods_name: this.goods_info.goods_name, //商品的名称goods_count: 1, //商品的数量 }// 3、通过 this 调用映射过来的 addToCart 方法把商品信息对象存储到购物车中this.addToCart(goods)}}}
3、使用getters
getters相当于计算属性把state里的数据进行处理后供使用 import { mapState,mapMutations,mapGetters } from vuex
gettets和 state 一样都在计算属性里用辅助方法展开 computed: {...mapState(m_cart, [cart]),...mapGetters(m_cart, [total])} 如果total变化的话购物车的上标也跟着变化 watch: {total(newVal) {const findResult this.options.find(x x.text 购物车)if (findResult) {findResult.info newVal}}}
四、完整文件
复制过来备忘测试过能运行不过只复制了 vuex 相关的文件
main.js
主运行文件在这里要导入并加载store.js
// #ifndef VUE3
import Vue from vue
import App from ./App
import store from /store/store.js// 导入网络请求的包
import {$http
} from escook/request-miniprogramuni.$http $http// 请求和根路径
$http.baseUrl https://api-hmugo-web.itheima.net// 请求拦截器
$http.beforeRequest function(options) {uni.showLoading({title: 数据加载中...})
}// 响应拦截器
$http.afterRequest function(options) {uni.hideLoading()
}// 封装弹框的方法,括号里是默认值
uni.$showMsg function(title 数据请求失败, duration 1500) {uni.showToast({title,duration,icon: none})
}Vue.config.productionTip falseApp.mpType appconst app new Vue({...App,store
})
app.$mount()
// #endif// #ifdef VUE3
import {createSSRApp
} from vue
import App from ./App.vue
export function createApp() {const app createSSRApp(App)return {app}
}
// #endifstore.js
vuex 的配置文件要把各个 vuex 模块比如cart.js 就是一个购物车共享数据模块导入并挂载到这里
//1.导入Vue和Vuex
import Vue from vue
import Vuex from vuex
// import moduleCart from /store/cart.js
import cartModule from /store/cart.js//2.将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)// 3.创建 Store 的实例对象
const store new Vuex.Store({modules: {// m_cart: moduleCartm_cart: cartModule}
})// 4.向外共享 Store 的实例对象
export default storecart.js
vuex 模块
里面的state相当于data
mutations相当于methods
getters相当于computer
export default {namespaced: true,state: () ({// 购物车的数组用来存储购物车中每个商品的信息对象// 每个商品的信息对象都包含如下6个属性// { goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state }cart: []}),mutations: {// goods是传进来的商品// 如果在state.cart的子对象中 找到和 goods 相同的goods_id,返回 符合条件的对象// 如果没找到相同的返回undefined,往state.cart 中 push goodsaddToCart(state, goods) {const findResult state.cart.find(x x.goods_id goods.goods_id)console.log(findResult)if (!findResult) {state.cart.push(goods)} else {findResult.goods_count}console.log(state.cart)}},getters: {total(state) {let c 0state.cart.forEach(x c x.goods_count)return c}}
}goods_detail.vue
购物车页面共享数据怎么使用都在这个页面示范了
templateview v-ifgoods_info.goods_name classgoods-detail-container!-- 轮播图区域 --swiper :indicator-dotstrue :autoplaytrue :interval3000 :duration1000 :circulartrueswiper-item v-for(item,i) in goods_info.pics :keyiimage :srcitem.pics_big clickpreview(i)/image/swiper-item/swiper!-- 商品信息区域 --view classgoods-info-box!-- 商品价格 --view classprice{{goods_info.goods_price}}/view!-- 商品信息主体区域 --view classgoods-info-body!-- 商品的名字 --view classgoods-name{{goods_info.goods_name}}/view!-- 收藏 --view classfaviuni-icons typestar size18 colorgray/uni-iconstext收藏/text/view/viewview classyf快递免运费 /view/view!-- 商品详情描述区域 --view classgoods-introducerich-text :nodesgoods_info.goods_introduce/rich-text/viewview classgoods-navuni-goods-nav :filltrue :optionsoptions :buttonGroupbuttonGroup clickonClickbuttonClickbuttonClick //view/view
/templatescript// 从 vuex 中按需导出 mapState 辅助方法import {mapState,mapMutations,mapGetters} from vuexexport default {computed: {// 调用 mapState 方法 把m_cart 模块中的 cart 数组映射到当前页面中作为计算属性来使用// ...mapSate(模块的名称1,[要映射的数据名称2])...mapState(m_cart, [cart]),...mapGetters(m_cart, [total])},watch: {total(newVal) {const findResult this.options.find(x x.text 购物车)if (findResult) {findResult.info newVal}}},data() {return {goods_info: {},options: [{icon: shop,text: 店铺,infoBackgroundColor: #007aff,infoColor: red}, {icon: cart,text: 购物车,info: 0}],buttonGroup: [{text: 加入购物车,backgroundColor: #ff0000,color: #fff},{text: 立即购买,backgroundColor: #ffa200,color: #fff}]}},onLoad(options) {const goods_id options.goods_idthis.getGoodsDetail(goods_id)},methods: {...mapMutations(m_cart, [addToCart]),async getGoodsDetail(goods_id) {const {data: res} await uni.$http.get(/api/public/v1/goods/detail, {goods_id})if (res.meta.status ! 200) return uni.$showMsg()res.message.goods_introduce res.message.goods_introduce.replace(/img /g,img styledisplay:block;).replace(/webp/g, jpg)this.goods_info res.message},preview(i) {uni.previewImage({current: i,urls: this.goods_info.pics.map(x x.pics_big)})},onClick(e) {if (e.content.text 购物车) {uni.switchTab({url: /pages/cart/cart})}},// 右侧按钮的点击事件处理函数buttonClick(e) {//1.判断是否点击了 加入购物车 按钮if (e.content.text 加入购物车) {// 2、组织一个商品的信息对象const goods {goods_id: this.goods_info.goods_id, //商品的Idgoods_name: this.goods_info.goods_name, //商品的名称goods_price: this.goods_info.goods_price, //商品的价格goods_count: 1, //商品的数量goods_small_logo: this.goods_info.goods_small_logo, //商品的图片goods_state: true, //商品的勾选状态}// 3、通过 this 调用映射过来的 addToCart 方法把商品信息对象存储到购物车中this.addToCart(goods)}}}}
/scriptstyle langscssswiper {width: 750rpx;image {width: 100%;height: 100%;}}.goods-info-box {padding: 10px;padding-right: 0;.price {color: #c00000;font-size: 18px;margin: 10px 0;}.goods-info-body {display: flex;justify-content: space-between;.goods-name {font-size: 13px;margin-right: 10px;}.favi {width: 120px;font-size: 12px;display: flex;flex-direction: column;align-items: center;border-left: 1px solid #efefef;color: gray;}}.yf {font-size: 12px;color: gray;margin: 10px 0;}}.goods-nav {position: fixed;bottom: 0;left: 0;width: 100%;}.goods-detail-container {padding-bottom: 50px;}
/style
