vuex的基本使用

vuex的基本使用

vuex的基本使用

一，想要获取vuex中的数据，用mapStore

import { mapStore } from ‘vuex’
1 mapStore([‘aa’, ‘bb’])=>会将vuex中的数据直接映射到当前组件的计算属性
2 注意点，不能与组件中的数据重名=》用对象可以设置别名mapStore({list1：‘list’})
3 如果还需要提供自己的计算属性

    ...mapStore(),
    自己的计算属性
}

二，修改state=》mutation(只能处理同步代码)

1 需要提交mutations 参数是一个对象

      this.$store.commit('del', { id })
    },

在mutations中写函数del

    state.list = state.list.filter(v => v.id !== payload.id)
  },

注意点：mutations中的函数参数只有两个，state-》vuex中的state，payload-》传过来的参数对象
2 如果只有一个提交的代码可以使用mapMutations简化
import { mapMutations } from ‘vuex’
methods:{
…mapMutation([‘del’]),
}

注意点：提交的参数是对应mutations里面的del的-》在template中参数就是一个对象

三，计算属性getters(根据state计算得来的)

vuex中计算：

  showFooter () {
    return 逻辑(state.list.length)
  }
}

组件中获取

    ...mapGetters(['leftCount', 'showFooter', 'showCompleted'])
  }

四，actions 执行异步操作

需要分发actions=》actions提交mutations
分发：

    clear () {
      this.$store.dispatch('clear')
    }
  }

提交：

 clear (context) {
   setInterval(() => {
     context.commit('clear')
   }, 1000)
 }
}

项目中什么时候会用到actions

1 完全不用，异步的操作都在组件内部完成
2 全用actions 异步的操作都在actions中完成
好处，例子：有很多组件都需要发送一个请求，不用actions，每个组件都要封装一遍很麻烦，可以在actions中封装，组件分发一下就行，或者用mapActions

   ...mapActions(['clear'])
 }

strict=>严格模式上线时一定要关掉