自定义js组件$Message（一） message.vue页面代码<template> <div class="msg-comp" :class="optionData.show ? 'slide' : ''" v-if="optionData.show"> <div class="msg-content" :style="{backgroundColor: optionData['bg-color']}"> <div class="msg-text" :style="{color: optionData['text-color']}">{{optionData.msg}}</div> </div> </div> </template> <script> export default { name: 'msg', props: { option: Object }, data () { return { countValue: 22, isShow: false, optionData: { 'show': false, // 是否展示 'time': 2000, 'bg-color': '#79dcb5', 'text-color': '#fff', 'msg': ''// 消息内容 } } }, watch: { option: { handler (newOption, oldOption) { if (newOption && typeof newOption === 'object') { this.optionData = Object.assign(this.optionData, newOption) } }, immediate: true, deep: true } }, methods: {}, mounted () { if (typeof this.option === 'object') { this.optionData = Object.assign(this.optionData, this.option) } this.optionData.show = true this.$nextTick(() => { setTimeout(() => { this.$destroy() document.body.removeChild(this.$el) }, this.optionData.time) }) } } </script> <style lang="less" scoped> .msg-comp { position: fixed; left: 50%; opacity: 0; transform: translate(-50%, -50%); z-index: 10000; &.slide { animation: slide 0.5s normal; animation-fill-mode: forwards } .msg-content { width: 200px; height: 50px; text-align: center; border-radius: 10px; .msg-text { line-height: 50px; } } } @keyframes slide { from { top: -10%; opacity: 0; } to { top: 15%; opacity: 1; } } </style>vue挂载脚本代码付费查看：传送门使用示例 mounted() { setInterval(()=>{this.$Message('弹窗提示')}, 3000) },

uniapp使用computed和store遇坑 1.用户登录后存储用户信息到 uni.setStorageSync(userInfo) 2.在 vuex 中 state 中写方法 state: { userInfo: () => Storage.getUserInfo() }, getters: { getUserInfo(state) { return state.userInfo() }, }, mutations: { setUserInfo(state, data) { state.userInfo = () => data }, }, actions: { setUserInfo(context, data) { context.commit('setUserInfo', data) } }试探过的无效方法：getters: { getUserInfo(state) { return Storage.getUserInfo() } },3.个人中心页面 user-center.vue 是 tabbar.vue 的子组件页面，在 user-center.vue 中的 computed 中直接使用 this.$Storage.getUserInfo() 方法 无法及时获取数据更新 遂不得已而采用vuex机制来保证页面数据及时更新computed: { syncUserInfo: function() { return this.$store.getters.getUserInfo || {} } },以上方法，只更新 Storage.getUserInfo() 数据，state变量是不会同步渲染更新的，必须调用this.$store.commit('setUserInfo', userInfo)来更新用户信息后才会全局更新4.vuex是非持久化数据，所以（1）通过 uni.setStorageSync(userInfo) 来做数据持久化（2）通过vuex机制来做数据的全局同步更新（3）两者结合实现App全局变量数据更新5.解决了以下几个问题（1）诸如用户信息、用户财务信息等App全局变量的数据一致性（2）避免了在不同页面频繁请求同一接口获取用户信息（3）在用户登录时获取用户信息后提前渲染用户信息页面，增强用户前端体验

SassError: expected selector报错 ::v-deep 替换 /deep/ 今天打开项目npm run dev，发现出现了报错信息如下： ERROR Failed to compile with 1 errors 20:27:22 error in ./src/nzk/components/themeEditor/layout/components/LeftPane.vue?vue&type=style&index=0&id=6985d748&lang=scss&scoped=true& Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected selector. ╷ 74 │ /deep/ .el-drawer.ltr{ │ ^ ╵ G:\nzk\cms-front\src\nzk\components\themeEditor\layout\components\LeftPane.vue 74:3 root stylesheet 搜了一下：尝试用 ::v-deep 或者 ::deep 替换 /deep/ ，成功解决了问题。某些预处理器（例如Sass）可能无法>>>正确解析。在这些情况下，可以用 /deep/ 如果 /deep/ 报错，可以使用 ::v-deep 或者 ::deep组合器-两者都是它们的别名，>>> 并且工作原理完全相同。用法和 /deep/ 完全一样

store基本用法 store.js写法import Vue from 'vue' import Vuex from 'vuex' import Index from './modules/index.js' Vue.use(Vuex) module.exports = new Vuex.Store({ state: {}, getters: {}, // 实时监听state值的变化(最新状态) modules: { Index }, mutations: {} // 这个对象里面可以放改变state的初始值的方法 })modules模块index.js写法const state = { loginFormOP: { show: false }, } const getters = { getLoginFormOP: state => { return state.loginFormOP } } const actions = {} const mutations = { setLoginFormOP: (state, o) => { state.loginFormOP = o; } } module.exports = { state, getters, actions, mutations }store属性使用（vuex 中store的数据需要放到computed 里面才能同步更新视图）computed: { loginFormOP() { return this.$store.state.Index.loginFormOP//或者this.$store.getters.getLoginFormOP }, },store属性修改this.$store.commit('setLoginFormOP', { show: true })

更新vuex store数据后视图没有同步更新 store state/detail/index.jsconst state = { id:0, playUrl:'b' }; const getters = {}; const actions = {}; const mutations = { setPlayUrl(state,url){ state.playUrl = url; // state.url = url; } }; export default { namespaced: true, state, getters, actions, mutations };index.jsimport Vue from 'vue'; import Vuex from 'vuex'; import Detail from './songDetail/index' Vue.use(Vuex); const state = {}; const actions = {}; const mutations = {}; const store = new Vuex.Store({ modules: { detail:Detail }, actions, state, mutations }); export default store;pageA:触发mutation：_this.$store.commit('detail/setPlayUrl',data.data.data);//存vuexpageB:展示数据：<template> <div class="bottom"> {{a}} <audio v-bind:src="getPlayUrl" controls="controls"> Your browser does not support the audio element. </audio> </div> </template> <script> export default { name: "index", data(){ return { // url:this.$store.state.detail.playUrl, //如果这样写的话会更新不了 a:'1', //这个在本组件里面的数据就可以更新 这个a 在created生命周期后三秒改变值就可以更新视图 } }, computed:{ //这里需要把store 动态的数据放到computed里面才会同步更新 视图 getPlayUrl(){ return this.$store.state.detail.playUrl } }, created() { // console.log('url',this.url); let _this = this; setTimeout(function () { _this.a = 10; },3000) } } </script> <style scoped> .bottom{ position: absolute; bottom: 0; left: 0; width: 100%; } </style>刚开始是没有放到computed 里面的（被我注释掉的部分） 视图没有同步更新 后来改成来以上代码就可以更新啦结论：1.本组件内data的数据和prop传递过来的数据能同步双向绑定和更新视图2.vuex 中store的数据需要放到computed 里面才能同步更新视图