vue页面单独抽出一个scss来控制全局样式的css，如何根据store中的值动态的修改background的颜色？

在Vue.js项目中，如果你想要将全局样式提取到单独的SCSS文件中，并通过Vuex store中的状态动态更改背景颜色，你可以按照以下步骤操作：

1. **创建全局SCSS文件**：
- 在`src/assets/scss` 或类似目录下创建一个名为`global.scss` 的文件，这里会定义你的全局样式，包括背景颜色等。

// global.scss
$body-color: #fff; //默认颜色
.bg-color {
  background-color: $body-color;
}

2. **导入并引用变量**：
在你需要应用动态颜色的地方，如`App.vue`或者`Layout.vue`中引入这个SCSS文件，并使用`@import`指令。

// App.vue or Layout.vue (template)
<style lang="scss" scoped>
@import '~assets/scss/global';
</style>

<script setup>
import { ref } from 'vue'
import { useStore } from '@/store'

const bgColorRef = ref('#your-default-color') // 初始化背景色

function updateBgColor() {
  const store = useStore()
  const dynamicColor = store.state.yourColorState // 根据store获取动态颜色
  bgColorRef.value = dynamicColor
}

// 在需要改变背景色的时候调用这个函数
useEffect(() => {
  updateBgColor()
}, [dynamicColor]) //监听store变化
</script>

3. **Vuex状态管理**：
- 在`store`中设置一个状态（例如`yourColorState`），并监听其变化，当值改变时触发`updateBgColor`函数更新背景颜色。

// store/index.js
export default new Vuex.Store({
  state: {
    yourColorState: '#your-dynamic-color', // 初始值
  },
  mutations: {
    changeColor(state, color) {
      state.yourColorState = color
    }
  },
  actions: {
    changeColorAction({ commit }, color) {
      commit('changeColor', color)
    }
  },
  getters: {
    getColor: state => state.yourColorState
  }
})

4. **触发颜色变更**：
- 每当你想根据store的状态改变背景色时，在组件内调用相应的action或者直接在store里改变颜色状态。

现在，`$body-color`已经可以在模板中根据store的变化动态调整背景颜色了。每当`yourColorState`在store中更新时，`updateBgColor`函数会被调用，进而更新全局背景颜色。