vuex 知识点

  • Action 类似于 mutation，不同在于：
    1.Action 提交的是 mutation，而不是直接变更状态。
    2.Action 可以包含任意异步操作。

  • mutation是同步的，当需要异步操作的时候，就需要dispatch一个action。

  • Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

　actions: {
　　increment (context) {
　　　context.commit('increment')
　　}
　}

实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：
等价于上面的代码。

　actions: {
　　increment ({ commit }) {
　　　commit('increment')
　　}
　}

  • 问：页面触发action进行请求，发现vuex state中的状态确实发生了变化，但是页面需要刷新才能渲染列表？
    答：我想到的解决方法：1.判断state的对应状态有值后，进行相应操作；2.用computed或watch，如果值变化，进行相应操作。

  • namespaced: true 配置的作用：
    通过 [文件名]/[value] 的方式访问值，而不用挂载到全局namespace。

export const myModule = {
    // This makes your getters, mutations, and actions accessed by, eg: 'myModule/myModularizedNumber' instead of mounting getters, 
    // mutations, and actions to the root namespace.
    namespaced: true,
    state: {
        myModularizedNumber: 0
    },
    getters: {
        myModularizedNumber: state => state.myModularizedNumber
    },
    mutations: {
        setModularizedNumber(state, newNumber) {
            state.myModularizedNumber = newNumber
        }
    }
}
  • 修改store里别的module中值的方法：
    1.在要修改值的module中，写一个mutation；
    2.在vue组件中触发的话，语句如下：
this.$store.commit('[module_name]/[mutation]')

  • store中的值，在mutations中才能修改。

  • 从store中取时间，并做倒计时显示在页面上：

  1. data中定义要在页面上显示的数据：time
    data () {
        return {
            time: ''
        }
    },
  1. computed中定义数据的处理：
    computed: {
        modifyTime () {
            if (this.user !== null) {
                return this.countDown(this.user.platform.modifyTime)
            }
            return ''
        }
  1. methods中定义处理数据的函数：
    methods: {
        countDown (time) {

        },

  • state作为store的唯一数据源而存在，在组件里可以使用this.$store.state来获取，但是这个数据是只读的，无法直接通过给this.$store.state赋值来达到赋值的效果。这时就轮到mutation出场了。
    mutation是唯一能更改store中的状态（state）的方法，这个相当于事件，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

  • 在 Vue.js devtools 中，mutations有type、payload 两个值。

  • vuex管理的是组件的状态，用getters可以让一个组件获取多个store中的states。

  • 访问vuex中的数据和方法:
    this.$store.state.数据名
    this.$store.getters.方法名

  • mapGetters 辅助函数（...mapGetters）仅仅是将 store 中的 getters 映射到局部计算属性，其实也就是从 getters 中获取对应的属性，跟解构类似。

  • 如果所有计算属性的名称都与 state 一致，可以在 mapState 中以数组的方式进行映射。如果 Vue 中已经存在计算属性，可以通过 ES6 的展开操作符 (...) 进行组合。

  • 获取store中数据的2种方式（因为store的数据有可能还不存在，所以需要判断下）：
    1.在computed中获取
    2.在watch中获取

  • 获取vuex组件store中值的2种方式：
    1.组件computed中获取store中的值（推荐）

    computed: {
        show: function () {
            return this.user !== null
        },
        form: function () {
            if (this.show === true) {
                let obj = _.cloneDeep(this.user)   // 深拷贝一份state数据
                // 对obj的数据进行处理，便于显示
                return obj
            }
            return null
        },
        ...mapState({
            user: state => state.user.auth
        })
    },

2.组件template中获取store中的值：

{{ $store.state.user.auth.nick | emptyFilter }}
:src=" $store.state.user.auth.icon "

  • vuex中的modules:
    可以在一个module下，再新建一个module

  • methods中自己定义的函数名，不要和methods中...mapActions({})中的函数同名；
    如果同名的话，vue不知道该执行哪个。

  • 使用如下语句引入modules时，必须在此文件夹的index.js中引入各module对应的js文件。

import * as modules from './modules'

posted on 2017-10-09 18:16  cag2050  阅读(158)  评论(0)  编辑  收藏  举报

导航