在vuex里定义vuex_fontsize
时间: 2023-11-21 11:56:57 浏览: 34
在Vuex中定义vuex_fontsize的步骤如下:
1. 在store.js文件中定义一个常量FONTSIZE,用于存储字体大小的值。
2. 在state中定义一个名为vuex_fontsize的属性,它的值为localStorage.getItem(FONTSIZE)或默认值'14px'。
3. 在mutations中定义一个名为setFontSize的方法,它接受两个参数:state和fontSize。在方法中,将state.vuex_fontsize的值设置为fontSize,并将fontSize存储到localStorage中。
4. 在actions中定义一个名为updateFontSize的方法,它接受一个context对象和一个fontSize参数。在方法中,调用context.commit方法来调用setFontSize方法,并将fontSize作为参数传递给它。
5. 在组件中使用mapState和mapActions来获取和更新vuex_fontsize的值。
代码如下所示:
```javascript
// store.js
const FONTSIZE = 'FONTSIZE'
export default new Vuex.Store({
state: {
vuex_fontsize: localStorage.getItem(FONTSIZE) || '14px'
},
mutations: {
setFontSize(state, fontSize) {
state.vuex_fontsize = fontSize
localStorage.setItem(FONTSIZE, fontSize)
}
},
actions: {
updateFontSize({ commit }, fontSize) {
commit('setFontSize', fontSize)
}
}
})
// 组件中使用
<template>
<div>
<p :style="{ fontSize: vuex_fontsize }">这是一段文字</p>
<button @click="changeFontSize">改变字体大小</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['vuex_fontsize'])
},
methods: {
...mapActions(['updateFontSize']),
changeFontSize() {
this.updateFontSize('16px')
}
}
}
</script>
```