013-在组件中使用vuex(store) 通过结合computed动态计算 并且修改store中的值 案例
程序员成长之旅 · 程序员成长之旅/Vue.js学习/Vue3/慕课网 - vue3.0实现todolist · 203 字
在组件中使用vuex(store) 通过结合computed动态计算 并且修改store中的值 案例
// @/store/index.js
import { createStore } from 'vuex'
export default createStore({
state: {
name: 'jack',
studySubjects: ['english', 'math']
},
mutations: {
setName(state, payload){
state.name = payload
},
addSubject(state, payload){
state.studySubjects.push(payload)
}
},
actions: {
},
modules: {
}
})
<template>
<div>
<div>
name: {{name}}
</div>
<input type='text' v-model='nameInputBox' @keybord.enter='addSubject' placeholder='输入新科目后按回车'>
<div>
subjects: {{subjects}}
</div>
<input type='text' v-model='newSubjectInputBox' @keybord.enter='addSubject' placeholder='输入新科目后按回车'>
</div>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
export default dinfineComponent({
name: 'example',
setup(){
//首先获取store对象
let store = useStore()
//利用computed动态计算, 自动获取最新值
let name = computed(() => {
//注意store访问变量的写法
return store.state.name
})
let subjects = computed(() => {
return store.state.subjects
})
let nameInputBox = ref('')
let newSubjectInputBox = ref('')
let setName = () => {
store.commit('setName', nameInputBox.value)
}
let addSubject = () => {
store.commit('addSubject', newSubjectInputBox.value)
}
return{
name,
subjects,
nameInputBox,
newSubjectInputBox,
setName,
addSubject
}
}
})
</script>