vuex的基本使用,vuex使用的大致步骤
这篇文章主要为大家详细介绍了状态管理实现记事本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了状态管理实现记事本功能的具体代码，供大家参考，具体内容如下
首先：执行命令安装状态管理
新公共管理安装vuex@next -保存
在mian.js中挂在状态管理
从导入存储。/商店
新Vue({
店，
render: h=h(App)
}).$ mount("# app ")
这里使用的蚂蚁设计用户界面：
新公共管理安装表示“反”设计-vue -保存
在主页。射流研究…中完整引入
从“蚂蚁设计”导入Antd
导入 ant-design-vue/dist/antd.css
Vue.use(Antd)
App.vue中
模板
div id=应用程序
差异
表示“不”输入占位符=请输入任务class=my_ipt :value=inputVal
@change=handleInputChange
/
a-button type= primary @ click= addItem 添加事项/a按钮
一线名单有边界：数据源= infoList 类= dt _ list
列表项slot=呈现项 slot-scope=项
！-复选框-
复选框：checked= item。done @ change=更改项目(项目。id，$event。目标。选中)“{ { item。信息} }/a-复选框
！-删除链接-
a slot= actions @ click= deleteItemById(item。id)删除/a
/a列表项
！-页脚区域-
div class=footer slot=footer
span{{unDoneNub}}条未完成/span
按钮组
a-button :type=ViewType==all ？primary : @ click= changeList( all )全部/a按钮
a-button :type=ViewType==撤消？primary : @ click= changeList( undo )未完成/a按钮
a-button :type=ViewType==done ？primary : @ click= changeList( done )已完成/a按钮
/a-button-group
a @click=deleteDone 清除已完成/a
/div
/a-list
/div
/div
/模板
脚本
从" vuex "导入{ mapState，mapGetters }
导出默认值{
名称："应用程序",
data () {
返回{
//模拟数据
//列表：[]
}
},
计算值：{
.mapState([list ， inputVal ， ViewType])，
.mapGetters([unDoneNub ， infoList])
},
已创建(){
这个store.dispatch(getList )
},
方法：{
handleInputChange (e) {
console.log(e.target.value)
//拿到输入框的值保存到状态管理中
这个store.commit(setInputVal ，e.target.value)
},
//向列表中添加事项
addItem () {
if (this.inputVal.trim().长度=0) {
返回警报(文本框不能为空)
}
//向商店中调用函数来修改数据不可以直接修改
这个store.commit(addItem )
},
//删除
deleteItemById (id) {
//控制台。日志(id)；
这个store.commit(deleteItem ，id)
},
//改变状态
更改项目(id，e) {
console.log(id，e)
//通过编号改变状态
这个store.commit(changeItem ，id)
},
//清除已完成
deleteDone () {
这个store.commit(deleteDone )
},
更改列表（类型){
这个. store.commit(changeList ，type)
}
}
}
/脚本
样式范围
#app {
填充：10px
边距：0自动；
显示器：flex
对齐-内容：居中；
}。我的_ipt {
宽度：500像素
右边距：10px
}。dt_list {
宽度：500像素
页边距-顶部：10px
}。页脚{
显示器：flex
justify-content:space-between；
对齐-项目：居中；
}
/风格
商店索引。射流研究…中
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
从" axios "导入爱可信
Vue.use(Vuex)
导出默认的新Vuex .商店({
状态：{
列表：[],
输入值： ,
id: 10，
视图类型："全部"
},
//真正操作数据的地方
突变：{
初始列表(状态，数据){
state.list=data
},
setInputVal(状态，数据){
state.inputVal=data
},
addItem(状态){
const obj={
id: state.id，
info: state.inputVal.trim()，
完成：错误
}
状态。列表。推送(obj)
州名
state.inputVal=
},
//删除已完成
删除完成（州){
状态。列表=州。列表。过滤器(项目={
退货完成！=真
})
},
删除项目(状态，id) {
状态。列表=州。列表。过滤器(项目={
//控制台。日志(项目。id)；
返回item.id！=id
})
},
//改状态
更改项目(状态，id) {
//对应编号的完成的值取反先拿索引根据索引取反对应的状态如果有多重状态则需要参数传递
常数索引=状态。列表。查找索引(项目={
返回item.id===id
})
如果（索引！==-1) {
state.list[index].搞定=!state.list[index].完成的
}
},
//改变列表
变更列表（状态，类型){
状态。视图类型=类型
状态
}
},
动作：{
//模仿发送请求
获取列表（内容){
axios.get(./列表。JSON’).然后(res={
console.log(res.data)
content.commit(INITLIST ，res.data)
})
}
},
模块：{
},
getters: {
//未完成的数量
unDoneNub(状态){
返回(状态。列表。过滤器(项目={
返回item.done==false
})).长度
},
//根据列表类型过滤不同的展示列表
信息列表（州){
如果（状态. ViewType==all) {
返回状态列表
}
如果（状态视图类型==撤消){
返回state.list.filter(item=！项目。完成)
}
如果（状态. ViewType==done) {
返回状态。列表。过滤器(item=item。完成)
}
}
}
})
list.json
[
{
id: 0，
信息: 打篮球，
完成：假
},
{
id: 1，
信息: 打王者荣耀，
完成：对
},
{
id: 2，
信息: 学习，
完成：假
},
{
id: 3，
信息: 吃饭，
完成：假
},
{
id: 4，
信息: 睡觉，
完成：假
}
]
结果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。