MXBLOG - vue
type: channel
link: https://mx.moonjer.com/category/vue/
items: 自定义js组件$Message（一）
items: uniapp使用computed和store遇坑
items: SassError: expected selector报错 ::v-deep 替换 /deep/
items: store基本用法
items: 更新vuex store数据后视图没有同步更新

自定义js组件$Message（一）
type: item
date: 2022-11-21T20:53:00+08:00
description: message.vue页面代码 {{optionData.msg}} vue挂载脚本代码付费查看：传送门使用示例 mounted() { setInterval(()=>{this.$Message('弹窗提示')}, 3000) },

uniapp使用computed和store遇坑
type: item
date: 2022-09-22T22:48:00+08:00
description: 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/
type: item
date: 2022-01-11T18:11:00+08:00
description: 今天打开项目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基本用法
type: item
date: 2021-10-10T15:56:00+08:00
description: 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数据后视图没有同步更新
type: item
date: 2021-10-10T15:47:00+08:00
description: 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:展示数据： {{a}} Your browser does not support the audio element. 刚开始是没有放到computed 里面的（被我注释掉的部分） 视图没有同步更新 后来改成来以上代码就可以更新啦结论：1.本组件内data的数据和prop传递过来的数据能同步双向绑定和更新视图2.vuex 中store的数据需要放到computed 里面才能同步更新视图