zoukankan      html  css  js  c++  java
  • Vuex

     Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

            import Vue from 'vue'
           import Vuex from 'vuex'

           Vue.use(Vuex)

        使用 Vuex 开发大型单页应用是非常合适的。如果的应用够简单,最好不要使用 Vuex。

      Vuex 的特性:

    1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。

    2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。 

    Store

      Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

      每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。

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

      可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:

        store.commit('increment')
        console.log(store.state.count)

    State

      Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。组件可以通过 this.$store.state 来访问需要用到的数据状态。

     

    Getter

      Getter 可以认为是 store 的计算属性。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。在组件中可以通过 store.getter 来访问。

            const store = new Vuex.Store({
             state: {
               todos: [
                { id: 1, text: '...', done: true },
                { id: 2, text: '...', done: false }
              ]
            },
             getters: {
               doneTodos: state => { //state 作为第一个参数
                 return state.todos.filter(todo => todo.done)
              }
               doneTodosCount: (state, getters) => { //其他的 getter 作为第二个参数
               return getters.doneTodos.length
              }
            }
          })

     

    Mutation

      更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受   state 作为第一个参数

            const store = new Vuex.Store({
             state: {
               count: 1
            },
             mutations: {
              increment (state, payload) {
      state.count += payload.amount
    }
            }
          })
            store.commit('increment', {     //提交mutation的第一种方式
             amount: 10
          })
           store.commit({ //提交mutation的第二种方式
             type: 'increment',
             amount: 10
          })

      mutation 使用注意事项:

    1. 最好提前在你的 store 中初始化好所有所需属性。

    2. 当需要在对象上添加新属性时,你应该

    • 使用 Vue.set(obj, 'newProp', 123), 或者

    • 以新对象替换老对象。例如,利用 stage-3 的对象展开运算符我们可以这样:state.obj = { ...state.obj, newProp: 123 }

      Mutation 必须是同步函数

       

    Action

      Action 类似于 mutation,不同在于:

    • Action 提交的是 mutation,而不是直接变更状态。

    • Action 可以包含任意异步操作

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

        const store = new Vuex.Store({
         state: {
           count: 0
        },
         mutations: {
           increment (state) {
             state.count++
          }
        },
         actions: {
           increment (context) {
             context.commit('increment')
          }
        }
        })
        store.dispatch('increment')

     

    Module

      Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

            onst moduleA = {
             state: { ... },
             mutations: { ... },
             actions: { ... },
             getters: { ... }
          }

           const moduleB = {
             state: { ... },
             mutations: { ... },
             actions: { ... }
          }

           const store = new Vuex.Store({
             modules: {
               a: moduleA,
               b: moduleB
            }
          })

           store.state.a // moduleA 的状态
           store.state.b // moduleB 的状态

      对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象

      对于模块内部的 action,局部状态通过 context.state 暴露出来,根节点状态则为 context.rootState

      模块内部的 action、mutation 和 getter 默认是注册在全局命名空间的,但是通过添加 namespaced: true 的方式可以使其成为带命名空间的模块。

        modules: {
          foo: {
            namespaced: true,
            getters: {
              //  getter 的第一个参数 `state`
              //  getter 的第二个参数 `getters`
              //  getter 的第三个参数 `rootState`
              //  getter 的第四个参数 `rootGetters`
              someGetter (state, getters, rootState, rootGetters) {
                getters.someOtherGetter // -> 'foo/someOtherGetter'
                rootGetters.someOtherGetter // -> 'someOtherGetter'
              },
              someOtherGetter: state => { ... }
            },
    
            actions: {
              //  action 的第一个参数 `dispatch`
              //  action 的第二个参数 `commit`
              //  action 的第三个参数 `getters`
              //  action 的第四个参数 `rootGetters`
              someAction ({ dispatch, commit, getters, rootGetters }) {
                getters.someGetter // -> 'foo/someGetter'
                rootGetters.someGetter // -> 'someGetter'
    
                dispatch('someOtherAction') // -> 'foo/someOtherAction'
                dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'
    
                commit('someMutation') // -> 'foo/someMutation'
                commit('someMutation', null, { root: true }) // -> 'someMutation'
              },
              someOtherAction (ctx, payload) { ... }
            }
          }
        }
    

    模块动态注册

      在 store 创建之后,你可以使用 store.registerModule 方法注册模块:

        // 注册模块 `myModule`
        store.registerModule('myModule', {
         // ...
        })
        // 注册嵌套模块 `nested/myModule`
        store.registerModule(['nested', 'myModule'], {
         // ...
        })
  • 相关阅读:
    HDU 2955 Robberies(01背包)
    HDU 2602 Bone Collector(01背包)
    HUST 1352 Repetitions of Substrings(字符串)
    HUST 1358 Uiwurerirexb jeqvad(模拟解密)
    HUST 1404 Hamming Distance(字符串)
    HDU 4520 小Q系列故事――最佳裁判(STL)
    HDU 2058 The sum problem(枚举)
    【破解】修改程序版权、添加弹窗
    HDU 1407 测试你是否和LTC水平一样高(枚举)
    HDU 1050 Moving Tables(贪心)
  • 原文地址:https://www.cnblogs.com/yaokai729/p/11447644.html
Copyright © 2011-2022 走看看