vuex学习笔记

vuex

  • 状态管理器
  • 作为应用中所有组件的中央储存
  • 只能以预定的方式去操作状态
  • 把所有组件共享的状态抽取出来作为全局的单例,使得任何组件都能访问状态、触发动作

初始化

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

注入到App

const app = new Vue({
  el: '#app',
  // 会自动注入到每个子组件
  store: store
  // ...
})

// 接下来就可以在每个组件里使用$store来代替this.store

State

  • 在组件中使用State里的数据(注意它是响应式的)
    const Counter = {
    template: <div>{{ count }}</div>,
    computed: {
    count () {
    return $store.state.count
    }
    }
    }

  • 使用mapState一次性做几个computed
    import { mapState } from 'vuex'

    export default {
      computed: {
        otherComputed() {},
        ...mapState({  // ES2015的新语法,把对象分散为多个属性
          count: state => state.count,  // 接收的state参数里存了各种东西
          // 上下两句话二选一
          countAlias: 'count',
        })
      }
    }
    
    // 如果属性的名字一样,可以传名称的数组给mapState
    mapState(['count'])
    
  • 但并非所有状态都无脑放State里,也可以放组件自己的储存里

Getters

  • 在全局提供可复用的"computed属性"供各个组件调用

  • 简单使用
    const store = new Vuex.Store({
    state: {
    todos: [
    { id: 1, text: '...', done: true },
    { id: 2, text: '...', done: false }
    ]
    },
    getters: {
    doneTodos: state => { // 接收第一个参数state用于调用state里的数据,第二个参数getters用于使用其他getter的结果
    return state.todos.filter(todo => todo.done)
    }
    }
    })

    computed: {
      doneTodosCount () {
        return this.$store.getters.doneTodosCount  // 通过$store.getters调用
      }
    }
    
  • 同样也有mapGetters
    import { mapGetters } from 'vuex'

    export default {
      computed: {
        ...mapGetters([
          'doneTodosCount',
          'anotherGetter',
        ])
      }
    }
    
    // 如果想改名字可以用对象
    ...mapGetters({
      doneCount: 'doneTodosCount'
    })Mutations
    

Mutations

  • 提交Mutation是修改State的唯一方法

  • 类似于事件(events)

  • 基本使用
    const store = new Vuex.Store({
    state: {
    count: 1
    },
    mutations: {
    increment (state, n) { // 接收state作为第一个参数,后面是commit时候传递过去的参数
    // mutate state
    state.count++
    }
    }
    })

    // 这样调用(实践中通常传一个对象作为第二个参数,这样可以传递多个属性)
    store.commit('increment', 10)  // 第一个参数是mutation名,而10就是上面的n
    
    //    另外一种写法,此时整个对象会作为mutation函数的第二个参数
    store.commit({
      type: 'increment',
      amount: 10
    })
    
  • 使用mapMutations
    import { mapMutations } from 'vuex'

    export default {
      // ...
      methods: {
        ...mapMutations([  // 数组形式
          'increment' // this.increment() = this.$store.commit('increment')
        ]),
        ...mapMutations({  // 对象形式
          add: 'increment' // this.add() = this.$store.commit('increment')
        })
      }
    }
    
  • 注意事项:

    • 在一开始的时候初始化State的每个属性
    • 对对象添加属性时应该使用Vue.set方法
    • Mutation应当是同步的,同时也不应该在异步方法里调用Mutation,否则会导致分不清先后顺序

Actions

  • 提交的是Mutation而不是State

  • 可以包含异步操作

  • 简单使用
    const store = new Vuex.Store({
    state: {
    count: 0
    },
    mutations: {
    increment (state) {
    state.count++
    }
    },
    actions: {
    increment (context) { // context有着store的所有属性和方法
    context.commit('increment')
    }
    }
    })

    // 使用解构来简化写法
    actions: {
      increment ({ commit }) {
        commit('increment')
      }
    }
    
  • 分发 Actions
    actions: {
    incrementAsync ({ commit }, payload) { // 进行异步操作。第二个参数是dispatch给他的
    setTimeout(() => {
    commit('increment')
    }, 1000)
    }
    }

    // 两种触发方式
    store.dispatch('incrementAsync', {
      amount: 10
    })
    store.dispatch({
      type: 'incrementAsync',
      amount: 10
    })
    
  • 使用样例
    actions: {
    checkout ({ commit, state }, payload) {
    const savedCartItems = [...state.cart.added]
    // 做一些异步操作例如清空购物车
    commit(types.CHECKOUT_REQUEST)
    shop.buyProducts(
    products,
    // 成功回调
    () => commit(types.CHECKOUT_SUCCESS),
    // 失败回调
    () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
    }
    }

  • mapActions
    import { mapActions } from 'vuex'

    export default {
      // ...
      methods: {
        ...mapActions([
          'increment' // this.increment() = this.$store.dispatch('increment')
        ]),
        ...mapActions({
          add: 'increment' // this.add() = this.$store.dispatch('increment')
        })
      }
    }
    
  • 处理异步的回调
    actions: {
    actionA ({ commit }) {
    return new Promise((resolve, reject) => { // 返回了一个Promise
    setTimeout(() => {
    commit('someMutation')
    resolve() // 函数内做好事情后resolve
    }, 1000)
    })
    },
    actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => { // 这里用then
    commit('someOtherMutation')
    })
    }
    }

Modules

  • 把Store划分成若干个 Module,避免臃肿

  • 每个Module有自己的State、Mutation、Action、Getter等

  • 二合一的state
    const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
    }

    const moduleB = {
      state: { ... },
      mutations: { ... },
      actions: { ... }
    }
    
    const store = new Vuex.Store({  // 包含2个子module
      modules: {
        a: moduleA,
        b: moduleB
      }
    })
    
    store.state.a // -> moduleA's state
    store.state.b // -> moduleB's state
    
  • 本地State

    • Module里的Getter等拿到的是Module自己的State,
    • 如果要访问根State,在Action里要使用context.rootState,而在Getter里rootState作为第三个参数传入。
  • 名字空间

    • 默认情况下不同Module里的Mutation等都注册在全局名字空间

    • 可以使用前缀或者后缀来区分

    • 样例
      // types.js

      // 定义名字常量并添加前缀
      export const DONE_COUNT = 'todos/DONE_COUNT'
      export const FETCH_ALL = 'todos/FETCH_ALL'
      export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
      
      // modules/todos.js
      import * as types from '../types'
      
      // define getters, actions and mutations using prefixed names
      const todosModule = {
        state: { todos: [] },
      
        getters: {
          [types.DONE_COUNT] (state) {
            // ...
          }
        },
      
        actions: {
          [types.FETCH_ALL] (context, payload) {
            // ...
          }
        },
      
        mutations: {
          [types.TOGGLE_DONE] (state, payload) {
            // ...
          }
        }
      }
      
  • 注册Module
    store.registerModule('myModule', {
    // ...
    })

    // 调用
    store.state.myModule.
    

推荐阅读更多精彩内容

  • Vuex 是什么? ** 官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式**。它采用集中...
    Rz______阅读 1,469评论 1 10
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,115评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 2,136评论 0 6
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 943评论 0 7
  • vuex是什么鬼? 如果你用过redux就能很快的理解vuex是个什么鬼东西了。他是vuejs用来管理状态的插件。...
    麦子_FE阅读 5,837评论 3 36