How to pass store values in components - vuejs2

Question

I want to pass values in the store.state in components and got an error:
[Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"
So I called the value in the component directly and it doesn't work.
const store = new Vuex.Store({
state: {
filter: {
selected: false,
value: 'test'
}
},
});
new Vue({
el: '#app',
template: `<div id="app"><div :selected="this.$store.state.filter.selected">Option</div></div>`
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex#3.0.1/dist/vuex.js"></script>
<div id="app"></div>
Vue
const store = new Vuex.Store({
state: {
filter: {
value: 'test',
selected: true
}
},
mutations: {},
actions: {},
getters: {}
});
HTML
<option :selected="store.state.filter.selected">{{store.state.filter.value}}</option>
Can I use it this way, or I need to think differently and how? Thanks.
My current solution is store the value in computed variables, but would there be a way to pass Vuex store values into a component directly?
computed: {
filter () {
return storeLogs.state.filter;
}
}
<option :selected="filter.selected">{{filter.value}}</option>

Answer 1

Two things:
You must pass your store object to the Vue constructor
There's no need to reference "this" in your template
const store = new Vuex.Store({
state: {
filter: {
selected: false,
value: 'test'
}
},
});
new Vue({
store, // add store object to Vue
el: '#app',
template: `<div id="app"><div selected="$store.state.filter.selected">Option</div></div>`
});
You can also use mapState like this in your .vue file:
<!-- MyComponent.vue -->
<template>
<option :selected="filter.selected">{{filter.value}}</option>
</template>
<script>
import { mapState } from 'vuex';
export default {
name : 'MyComponent',
computed() {
...mapState(['filter'])
}
}
</script>