vue编写的计划本小项目案例详解

vue编写的计划本小项目案例详解

页面展示

主要功能

1. 添加事项
2. 删除事项
3. 点击已完成
4. 清除已完成
5. 全部、未完成、已完成，按钮进行切换

项目部署

使用vue ui命令在终端输入，启动可视化面板，生成vue项目模板，然后用编辑器打开。在此步骤遇到问题的，请自行上网查询解决方案。

知识点储备

vuex的核心内容

• state 存放状态
• mutations state成员操作
• getters 加工state成员给外界
• actions 异步操作
• modules 模块化状态管理

代码详解

功能点一：页面数据的展示

1. 将数据保存在public/list.json下面
2. 在项目中的store.js中添加Vuex和axios模块
3. mutations中初始化数据列表

 initlist(state,list){
     state.list=list
 },

4. actions中异步加载 public/list.json里面的数据

 getList(context){
        axios.get('/list.json').then(({data})=>{
            console.log(data)
            context.commit('initlist',data)
        })
    }

5. 在main.js中需要在页面中注入store.js
6. 在App.vue页面中进行调用store.js里面的getList方法

  // 页面的生命周期函数
  created(){
    this.$store.dispatch('getList') 
  },

功能点二：点击添加按钮，往数据列表中添加数据

1. 在input按钮中绑定store.js中的inputvalue属性，具体代码如下

  // 计算属性
  computed:{
    // 做了一个映射
    ...mapState(['inputvalue']),
  },

2. 在button按钮中添加点击事件，判断一下用户输入是否为空，然后调用store.js里面的addItem方法，注意的是这个方法是对数据进行操作，需要写在commit里

  addItemToList(){
      // 判断用户是否输入为空
      if(this.inputvalue.trim().length<=0){
        return this.$message.warning('文本框内容不能为空')
      }
      // 向列表中添加item项
      this.$store.commit('addItem',this.inputvalue)
    },

3. addItem方法：

//   向列表中添加item项
      addItem(state,item){
          const obj={
              id:state.nextId,
              info:item,
              done:false
          }
          state.list.push(obj)
          state.nextId++;
          state.inputvalue=''
      },

功能点三：页面数据的切换

1. 将所有的按钮添加相同的点击事件，具体代码如下。在此之前同样需要在store.js里面设置一个状态属性，用于标记当前按钮的状态，以便后续的状态切换，显示不同的数据。viewkey做法同上述的inputvalue属性相同。

<!--操作按钮-->
<a-button-group>
  <a-button :type="viewKey==='all'?'primary':'default'" @click="changeList('all')">全部</a-button>
  <a-button :type="viewKey==='undone'?'primary':'default'" @click="changeList('undone')">未完成</a-button>
  <a-button :type="viewKey==='done'?'primary':'default'" @click="changeList('done')">已完成</a-button>
</a-button-group>

2. changeList调用了store.js里面的changeViewKey函数，用于修改viewKey属性

 // 修改页面上展示的数据
 changeList(key){
   console.log(key)
   this.$store.commit('changeViewKey',key)
 }

3. changeStatus方法在mutations中实现

//   修改列表项的选中状态
 changeStatus(state,paras){
    const i=state.list.findIndex(x=>x.id===paras.id)
    if(i!==-1){
        state.list[i].done=paras.status
    }
 },

4. 根据状态值（all、undone、done）来确定给页面传输哪些数据，具体代码如下

 // 根据面板中的选项进行数据的展示
    infolist(state){
       if(state.viewKey=='all'){
           return state.list
       }
       if(state.viewKey==='undone'){
           return state.list.filter(x=>x.done===false)
       }
       if(state.viewKey==='done'){
           return state.list.filter(x=>x.done===true)
       }
       return list
    }

5. App.vue中做了一个映射，并在显示列表中绑定映射的属性值

// 计算属性
computed:{
  // 做了一个映射
  ...mapState(['inputvalue','viewKey']),
  ...mapGetters(['infolist'])
}

总结

这个小项目是我在B站上找的，本来是想学习一下vuex的用法。用来练手刚刚好，对于前端小白来说，入手很容易，里面的代码逻辑也不是太难。我主要列举了其中几个功能，不过其他几个的大致流程也都如此，主要核心思想就是vuex的那几个功能块，掌握清楚之后，每个函数的作用，以及写在哪里，如何在页面调用，这些都很容易能够理解。最后我会给B站的参考视频，欢迎大家批评指正。

B站参考视频：https://www.bilibili.com/video/BV1dp4y1S7G6?t=15]