---
# System prepended metadata

title: Vuex tempalte
tags: [Vue note]

---

---
title: Vuex tempalte
tags: Vue note
---    

# Vuex template

---


## Vuex linking Vue

    npm i vuex vue 


> store/ index.js

    import Vuex from 'vuex';
    import Vue from 'vue';

    // build the relationship with vue
    Vue.use(Vuex);

    export default new Vuex.Store({
      modules: {},
    });


> main.js

    import Vue from 'vue';
    import App from './App';
    
    // Named index.js can just import the directory (webpack default)
    import store from './store';

    new Vue({
      // Actual data communicate
      store,
      render: (h) => h(App),
    }).$mount('#app');
    
---

## modules example:

> store/ modules/ auth.js
    
<!-- ![](https://i.imgur.com/y2558f7.png =400x) -->
![](https://i.imgur.com/z3xrBpK.png =400x)

- **!!! not gutters is getters**
- use commit() from ({commit}) to call(excute) mutations

> store/ index.js

    import Vuex from 'vuex';
    import Vue from 'vue';

    Vue.use(Vuex);

    export default new Vuex.Store({
      modules: {auth},
    });
    
## actions in components example:



![](https://i.imgur.com/Yyx9W37.png =400x)

- just call login don't need to like (auth.login) 
 vuex automatically find one in different modules
 
## getters in components:

    <template>
            {{ isLoggedIn }}
    </template>
    <script>
        import { mapGetters } from 'vuex';


         export default {
          computed: mapGetters(['isLoggedIn']),

        };
    </script>