A
A
Ankozar2021-08-20 22:46:22
Vue.js
Ankozar, 2021-08-20 22:46:22

How to connect Vuex to a CLI project?

For example, you need to change the class for several blocks, depending on the "mobile" parameter.
For example, in header.
App.vue, store. vue, Header.vue

App.vue:

<template>
  <Header/>
</template>

<script>
import Vuex from 'vuex'
import store from './components/store/store.vue'

import Header from './components/Pages/Header.vue'

export default {
  name: 'App',
  components: {
    Header,
  },
  data:function(){
    return {
      mobile: 1
    }
  },
  methods:{
    
  },
  mounted(){
  }
}
</script>


store.vue:
<script>
import { createStore } from 'vuex'

const store = createStore({
  state () {
    return {
      mobile: 0
    }
  },
  mutations: {
    switcher (state) {
      state.mobile =!state.mobile
    }
  }
})

export default ({
store

})



</script>


header.vue:
<template>

    <header id="header" class="header" :class={"header-mobile" : sore.state.mobile}>
        <a href="/" target="_self"><img class='logo1' src='/img/сайт-лого-тостер2.png' href='/'></a>
        <img class='logo2' src='/img/лого текст3.png'>
        <RegionLogoDiv/>
        <MenuButt/>
    </header>
</template>

<script>
import RegionLogoDiv from './RegionLogoDiv.vue'
import MenuButt from './MenuButt.vue'

export default {
  name: 'Header',
  components:{
        RegionLogoDiv,
        MenuButt
  },
  props: {
  }
}
</script>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question