凯发k8官方网
收集整理的这篇文章主要介绍了
基于vue和vuex的todos效果展示及源码分享
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
todos,待做项目经常被以各种方式来实现，js,node,
这里分享一个基于vue和vuex的todos
主要有三部分代码main.js,index.js,app.vue
import vue
from 'vue'
import app
from './app.vue'
import antd
from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import store
from './store/index'
vue
.config
.productiontip
= false
vue
.use(antd
)new vue({render
: h
=> h(app
),store
}).$mount('#app')
import vue
from 'vue'
import vuex
from 'vuex'
import axios
from 'axios'vue
.use(vuex
)export default new vuex.store({state
: {list
: [],inputvalue
: 'abc',nextid
: 5,viewkey
: 'all'},mutations
: {initlist(state
, list
) {state
.list
= list
},setinputvalue(state
, val
) {state
.inputvalue
= val
},additem(state
) {const obj
= {id
: state
.nextid
,info
: state
.inputvalue
.trim(),done
: false}state
.list
.push(obj
)state
.nextidstate
.inputvalue
= ''},removeitem(state
, id
) {const i
= state
.list
.findindex(x
=> x
.id
=== id
)if (i
!== -1) {state
.list
.splice(i
, 1)}},changestatus(state
, param
) {const i
= state
.list
.findindex(x
=> x
.id
=== param
.id
)if (i
!== -1) {state
.list
[i
].done
= param
.status
}},cleandone(state
) {state
.list
= state
.list
.filter(x
=> x
.done
=== false)},changeviewkey(state
, key
) {state
.viewkey
= key
}},actions
: {getlist(context
) {axios
.get('../list.json').then(({ data
}) => {context
.commit('initlist', data
)})}},getters
: {undonelength(state
) {return state
.list
.filter(x
=> x
.done
== false).length
},infolist(state
) {if (state
.viewkey
=== 'all') {return state
.list
} else if (state
.viewkey
=== 'undone') {return state
.list
.filter(x
=> !x
.done
)} else if (state
.viewkey
=== 'done') {return state
.list
.filter(x
=> x
.done
)} else {return state
.list
}}},modules
: {}
})
源码链接: link.
与50位技术专家面对面20年技术见证，附赠技术全景图
总结
以上是凯发k8官方网为你收集整理的基于vue和vuex的todos效果展示及源码分享的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。
