state 中没有属性的情况下,新增属性不会触发mutations修改。
例:
commit('change', {
c: 3,
d: 4,
});
state: {
test: {
a: 1,
b: 2,
}
},
mutations: {
change(state, payload) {
state.test.c = payload.c; // 直接新增属性不会触发
state.test = Object.assign(state.test, payload); // 浅拷贝不会触发
}
}
解决方案
state.test = { state.test, ...payload };
vue-cli打包后,css里的背景图片无法找到资源
解决方法:
https://github.com/vuejs/vue-cli/issues/179
@margox
在build目录下新建一个cssPathResolver.js,内容如下:
module.exports = function (source) {
if (process.env.NODE_ENV === 'production') {
return source.replace('__webpack_public_path__ + "static', '"..')
} else {
return source
}
}
webpack.base.conf.js里的img部分改为
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loaders: [
{
loader: path.resolve(__dirname, 'cssPathResolver')
},
{
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
},
},
],
},
build后图片加载是相对路径,无法找到图片
图片大小大于10K。
在build文件夹webpack.base.conf.js修改url-loader的limit。
{
loader: 'url-loader',
query: {
limit: 150000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
},
}
或者可在src文件夹同级的目录建立static
<img src='static/xxxx.jpg'>
给v-for遍历产生的元素绑定事件,并动态添加style。
例:
<ul v-for='result of results'>
<li>
<div class='cut'>
<img :src='result.src'>
</div>
</li>
</ul>
当图片加载时,记录当前图片原始宽高,处理后传值给style。
首先需求是,在加载图片时记录当前图片原始宽高,所以img标签需要加上@load绑定onload事件。
<ul v-for='result of results'>
<li>
<div class='cut'>
<img @load='load' :src='result.src'>
</div>
</li>
</ul>
<script>
export default {
data() {
results: [
{ src: 'src', style: null },
{ src: 'src', style: null },
{ src: 'src', style: null },
],
},
methods: {
load(e) {
const img = e.target;
const [naturalWidth, naturalHeight] = getNatural(img);
function getNatural(img) {
let nWidth;
let nHeight;
if (img.naturalWidth) {
nWidth = img.naturalWidth;
nHeight = img.naturalHeight;
}
//省略兼容html 4
return [nWidth, nHeight];
}
},
},
};
</script>
问题来了,这时候load方法虽然获取到了图片的原始宽高,但是传值给style则是个问题。如果要传当前元素的宽高,则需要在模板部分修改:
<img @load='load(result)' :src='result.src'>
这时传的值result会覆盖了event事件。导致load方法出错。
如果需要传event事件需要改成这样:
<img @load='load(result, $event)' :src='result.src'>
load方法就能同时接受当前遍历对象及触发事件。
ps:methods里面的方法有个默认声明的对象event,里面的属性和$event传过来的一样,但是官方文档没写,不建议使用。
此时在load方法里添加处理style的逻辑:
methods: {
load(item, e) {
const img = e.target;
const [naturalWidth, naturalHeight] = getNatural(img);
//省略函数
if (naturalWidth >= narturalHeight) {
margin = ((naturalWidth * 100) / narturalHeight) / 2;
item.style = { marginLeft: `-${margin}px`, height: '100px' };
} else {
item.style = { marginLeft: 'margin-left: -60px', height: '100px' };
}
},
},
这里也要注意style是个对象。同时,属性的值不能有分号,否则不会渲染style。