我还想知道我是否以正确的方式将参数传递给存储操作?
//Side_bar.vue
<template>
<div id="sideBar">
<ul>
<li v-for='l in links'>
<button v-on:click='d(l.title)'>{{l.title}}</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'sideBar',
data () {
return {
links: [
{'title':'asset', 'valuesss':'ASSET'},
{'title':'task', 'valuesss':'TASK'},
{'title':'user', 'valuesss':'USER'}
]
}
},
computed:{
d(v){
console.log(v)
// update active table
this.$store.dispatch('updateActiveTable',v)
}
}
}
</script>
<style>
li {
list-style-type: none;
padding-bottom: 5px;
}
</style>
存储文件如下所示
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
activeTable: 'assets' // def view
};
const mutations = {
setActiveTable(context,v){
context.activeTable = v
}
};
const getters={
getActiveTable(context){
//return active table
return context.activeTable
}
};
const actions={
updateActiveTable(context,v){
console.log(context)
context.commit('setActiveTable',v)
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
<template>
<div id="app">
<sideBar></sideBar>
<tableComponent></tableComponent>
</div>
</template>
<script>
import sideBar from './components/Side_bar'
import tableComponent from './components/Table_component'
export default {
name: 'app',
components:{
sideBar,
tableComponent
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
small {
display: block;
font-style: italic;
}
</style>
