grow_的博客

因为不需要改变state,所以使用getters1、 vuex实现：getters:{ //切换按钮得到相应的list,list并没有发生变化 infoList(state){ if(state.viewKey==='all'){ return state.list } if(state.viewKey==='undone'){ return state.list.filter((x)=>!x.done) } i

1、组件定义//三个按钮绑定相同的函数，传递不同的参数 @click="changeList('all')" @click="changeList('undone')" @click="changeList('done')"methods:{ changeList(key){ //打印传递过来的参数 console.log(key) this.$store.commit('changeViewKey',key)}}2、 vuex设置行为state:stat

1、 绑定函数组件： <a @click="clean">清除已完成</a> methods: { // 清除已完成的任务 clean() { this.$store.commit('cleanDone') } }2、vuex处理实现vuex:mutations: { // 清除已完成的任务 cleanDone(state) { state.list = state.list..

getters作用：包装器，不会修改state原数据，对state元数据进行包装处理，将结果返回1、vuex添加 getters和actions同级 getters: { // 统计未完成的任务条数 unDoneLength(state) { return state.list.filter((x) => x.done === false).length } },2、其他组件的使用import { mapGetters } from '.

1、：checked="item.done" 动态绑定复选框2、 复选框绑定的函数 <!-- 复选框 --> <a-checkbox :checked="item.done" @change=" (e) => { cbStatusChange(e, item.id) } " >{{ item.info }}

1、给删除按钮绑定事件组件：@click="removeItemById(item.id)" methods: { // 通过id删除莫一项item removeItemById(id) { // console.log(id) this.$store.commit('removeItem', id) }}2、vuex ---实现vuex: mutations: { // 根据id删除对应的任务事项 remo

官网地址：github：https://github.com/kamranahmedse/driver.js 用法和用例介绍：https://kamranahmed.info/driver.js/ 简单的安装使用介绍（中文，非官方）：http://f2ex.cn/driver-js/

1、将state中的值同步到页面进行渲染 // 存储数据 state: { // 所有的任务列表 list: [], // 文本框的内容 inputValue: 'aaa' }, //组件使用 import { mapState} from 'vuex' computed: { ...mapState(['list', 'inputValue']) } :value="inputValue"2、将文本框的内容变化---

1、将list的数据存放在public/list.json中2、store中依赖axios store简介：基于promise的http库，可以用在浏览器和node.js store优势：从浏览器创建XMLHttpRequest \ 从node.js创建http请求 \ 拦截请求和相应 \转换请求数据和响应数据 ...3、store的actions创建接口方法，mutations中为state赋值，state存储数据 actions: { getList...