在less使用vuex变量
时间: 2023-08-11 11:36:36 浏览: 85
小鱼音乐自创移动端网页(技术栈:Vue+axios+sass+less+js+组件封装+UI组件库+vuex+service)
要在less中使用Vuex变量,可以通过以下步骤:
1. 在Vuex store中定义一个变量,例如:
```javascript
state: {
primaryColor: '#007bff'
}
```
2. 在组件中引入Vuex,并将变量映射为计算属性:
```javascript
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['primaryColor'])
}
}
```
3. 在less中使用该计算属性:
```less
@import "~@/styles/variables";
.primary-button {
background-color: v-bind(@primaryColor);
}
```
注意,less中需要使用`v-bind`来绑定计算属性。同时,需要在`variables.less`文件中定义该变量:
```less
@primaryColor: #007bff;
```
这样就可以在less中使用Vuex中的变量了。
阅读全文