---
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

<!--  -->

- **!!! 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:


- 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>