关于vue.js:Vue-第一章-Vuex

3次阅读

共计 7421 个字符，预计需要花费 19 分钟才能阅读完成。

  • 本文基于 Vue2 解说 Vuex
  • 教程视频：107_尚硅谷 Vue 技术_Vuex 工作原理图_哔哩哔哩_bilibili

1、简介

  • Vuex 是一种状态管理模式，集中式存储和治理利用的所有组件的状态。

  • 比照 Pinia

    • Vuex 应用繁多状态树，每个利用仅蕴含一个 store 实例；而 pinia 能够存在多个 store 实例；
    • 严格模式下，Vuex 不能间接扭转 store 中的状态，惟一路径是显式地提交 mutation；而 pinia 能够间接批改；

2、外围

1）State

  • Vuex 采纳繁多状态树，这棵状态树就是 state，这也意味着，每个利用将仅仅蕴含一个 store 实例。

（1）获取状态

  • 因为 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简略的办法就是在计算属性中返回某个状态。

    // 创立一个 Counter 组件
// 每当 `store.state.count` 变动的时候, 都会从新求取计算属性，并且触发更新相关联的 DOM。const Counter = {template: `<div>{{ count}}</div>`,
  computed: {count () {return store.state.count}
  }
}

（2）mapState 辅助函数

  • mapState：把 state 属性映射到 computed 身上。

  • 当一个组件须要获取多个状态的时候，将这些状态都申明为计算属性会有些反复和冗余，咱们能够应用 mapState 辅助函数帮忙咱们生成计算属性。

    import {mapState} from 'vuex';
export default{
    computed:{...mapState("loginModule",["userinfo"])
    }
}

2）Getter

  • 就像计算属性一样，getter 的返回值会依据它的依赖被缓存起来，且只有当它的依赖值产生了扭转才会被从新计算。

  • Getter 承受 state 作为其第一个参数，也能够承受其余 getter 作为第二个参数。

    const store = new Vuex.Store({
  state: {
    todos: [{ id: 1, text: '...', done: true},
      {id: 2, text: '...', done: false}
    ]
  },
  getters: {
    doneTodos: state => {return state.todos.filter(todo => todo.done)
    }
      
    doneTodosCount: (state, getters) => {return getters.doneTodos.length}
  }
})

（1）通过属性拜访

  • Getter 会裸露为 store.getters 对象，你能够以属性的模式拜访这些值。

  • 留神，getter 在通过属性拜访时是作为 Vue 的响应式零碎的一部分缓存其中的。

    store.getters.doneTodos // -> [{id: 1, text: '...', done: true}]

（2）通过办法拜访

  • 通过让 getter 返回一个函数，来实现给 getter 传参，实质是利用闭包的模式。在你对 store 里的数组进行查问时十分有用。

  • 留神，getter 在通过办法拜访时，每次都会去进行调用，而不会缓存后果。

    getters: {
  // ...
  getTodoById: (state) => (id) => {return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> {id: 2, text: '...', done: false}

（3）mapGetters 辅助函数

  • mapGetters 辅助函数仅仅是将 store 中的 getter 映射到部分计算属性：

    import {mapGetters} from 'vuex'

export default {
  computed: {
  // 应用对象开展运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
    ])
  }
}

  • 如果你想将一个 getter 属性另取一个名字，应用对象模式

    ...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

3）Mutation

  • 更改 Vuex 的 store 中的状态的惟一办法是提交 mutation。

（1）事件注册

  • 每个 mutation 都有一个字符串的事件类型和 一个 handler 回调函数。这个回调函数就是咱们理论进行状态更改的中央，并且它会承受 state 作为第一个参数。

    const store = new Vuex.Store({
  state: {count: 1},
  mutations: {increment (state) {
      // 变更状态
      state.count++
    }
  }
})

（2）事件调用

  • 唤醒一个 mutation handler，你须要以相应的 type 调用 store.commit 办法。

    store.commit('increment')

  • 你能够向 store.commit 传入额定的参数，即 mutation 的 载荷（payload）。

    在大多数状况下，载荷应该是一个对象，这样能够蕴含多个字段并且记录的 mutation 会更易读。

    mutations: {increment (state, payload) {state.count += payload.amount}
}

store.commit('increment', {amount: 10})

（3）注意事项

  • store 中的状态是响应式的，当咱们变更状态时，监督状态的 Vue 组件也会自动更新。这意味着 mutation 也须要与应用 Vue 一样恪守一些注意事项：

    // 1. 最好提前在 store 中初始化好所有所需属性。// 2. 在对象上增加新属性时。Vue.set(obj, 'newProp', 123) // 增加属性
state.obj = {...state.obj , newProp:123}    // 新对象替换老对象

（4）同步函数

  • 察看 devtool 中的 mutation 日志，为了记录每一条 mutation，devtools 须要捕捉到 mutation 前一状态和后一状态的快照。
  • 这要求 mutation 必须是同步函数。因为回调函数中进行的状态的扭转都是不可追踪的。

（5）mapMutations 辅助函数

  • 应用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

    import {mapMutations} from 'vuex'

export default {
  methods: {
    ...mapMutations(['increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也反对载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
      
    ...mapMutations({add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    }),
    ...mapMutations('loginModule',['setUser']),    // 模块
  }
}

4）Actions

  • 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')
    }
  }
})

（1）散发 Action

  • Action 通过 store.dispatch 办法触发：

    store.dispatch('increment')

  • Actions 反对同样的载荷形式和对象形式进行散发

    // 以载荷模式散发
store.dispatch('incrementAsync', {amount: 10})

// 以对象模式散发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

（2）mapActions 辅助函数

  • 应用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用。

    import {mapActions} from 'vuex'

export default {
  methods: {
    ...mapActions(['increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也反对载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
      
    ...mapActions({add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

5）Module

  • 因为应用繁多状态树，利用的所有状态会集中到一个比拟大的对象。当利用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 容许咱们将 store 宰割成模块（module）。

  • 每个模块领有本人的 state、mutation、action、getter、甚至是嵌套子模块。

    const 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 的状态

（1）部分状态

  • 对于模块外部的 mutation 和 getter，接管的第一个参数是 模块的部分状态对象。

    const moduleA = {state: () => ({count: 0}),
  mutations: {increment (state) {
      // 这里的 `state` 对象是模块的部分状态
      state.count++
    }
  },

  getters: {doubleCount (state) {return state.count * 2}
  }
}

  • 对于模块外部的 action，部分状态通过 context.state 裸露进去，根节点状态则为 context.rootState：

    const moduleA = {
  // ...
  actions: {incrementIfOddOnRootSum ({ state, commit, rootState}) {if ((state.count + rootState.count) % 2 === 1) {commit('increment')
      }
    }
  }
}

  • 对于模块外部的 getter，根节点状态会作为第三个参数裸露进去：

    const moduleA = {
  // ...
  getters: {sumWithRootCount (state, getters, rootState) {return state.count + rootState.count}
  }
}

（2）命名空间

  • 如果心愿你的模块具备更高的封装度和复用性，你能够通过增加 namespaced: true 的形式使其成为带命名空间的模块。

  • 当模块被注册后，它的所有 getter、action 及 mutation 都会主动依据模块注册的门路调整命名。

    // loginModule.js
export default {
    namespaced:true,
    state:{
        userinfo:{
            user:'',
            token:''
        }
    },
    mutations:{
        // 设置用户信息
        setUser(state,payload){state.userinfo = payload;},
        // 清空
        clearUser(state){
            state.userinfo={
                user:'',
                token:''  
            }
        }
    },
}

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import loginModule from './modules/loginModule'

Vue.use(Vuex)

export default new Vuex.Store({state: {},
  mutations: { },
  actions: { },
  modules: {loginModule}
})

（3）模块动静注册

  • 在 store 创立 之后，你能够应用 store.registerModule 办法注册模块。

    import Vuex from 'vuex'
const store = new Vuex.Store({/* 选项 */})

// 注册模块 `myModule`
store.registerModule('myModule', {// ...})

// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {// ...})

  • 相干办法：

    • 通过 store.state.myModule 和 store.state.nested.myModule 拜访模块的状态。
    • 通过 store.unregisterModule(moduleName) 来动静卸载模块。留神，你不能应用此办法卸载动态模块（即创立 store 时申明的模块）。
    • 通过 store.hasModule(moduleName) 办法查看该模块是否曾经被注册到 store。

3、进阶

1）严格模式

  • 在严格模式下，无论何时产生了状态变更，只有不是由 mutation 引起的，将会抛出谬误。这能保障所有的状态变更都能被调试工具跟踪到。

  • 严格模式会深度监测状态树来检测不合规的状态变更，== 请确保在公布环境下敞开严格模式，以防止性能损失。==

    const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

2）表单解决

  • 当在严格模式中应用 Vuex 时，在属于 Vuex 的 state 上应用 v-model 会比拟辣手：

    <input v-model="obj.message">

    假如这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输出时，v-model 会试图间接批改 obj.message。在严格模式中，因为这个批改不是在 mutation 函数中执行的, 这里会抛出一个谬误。

  • 办法是应用带有 setter 的双向绑定计算属性：

    mutations: {updateMessage (state, message) {state.obj.message = message}
}

// login.vue
<input v-model="message">

computed: {
  message: {get () {return this.$store.state.obj.message},
    set (value) {this.$store.commit('updateMessage', value)
    }
  }
}

3）数据长久化

  • 浏览器刷新页面后，Vuex 的数据会失落。
  • 起因：store 里的数据保留在运行内存中，当页面刷新时，页面从新加载 Vue 实例，store 被从新赋值初始化。

（1）sessionStorage

  • 在页面加载时读取 sessionStorage 里的状态信息，在页面刷新时将 vuex 里的信息保留到 sessionStorage。

    created() {
    // 在页面加载时读取 sessionStorage 里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign({},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    
    // 在页面刷新时将 vuex 里的信息保留到 sessionStorage 里
    window.addEventListener("beforeunload", () => {sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
}

（2）vuex-along

  • vuex-along 的本质也是 localStorage 和 sessionStorage，只不过存储过程由第三方库实现；

  • 配置 vuex-along在 store/index.js 中最初增加以下代码:

    import VueXAlong from 'vuex-along' // 导入插件
export default new Vuex.Store({
    //modules: {
        //controler  // 模块化 vuex
    //},
    plugins: [VueXAlong({
        name: 'store',     // 寄存在 localStroage 或者 sessionStroage 中的名字
        local: false,      // 是否寄存在 local 中  false 不寄存 如果寄存依照上面 session 的配置
        session: {list: [], isFilter: true } // 如果值不为 false 那么能够传递对象 其中 当 isFilter 设置为 true 时，list 数组中的值就会被过滤调, 这些值不会寄存在 seesion 或者 local 中
    })]
});
正文完
vue.js
发表至： vue.js
2022-12-17
 0
关于vue.js:Vue自定义组件Props中接收数组
关于vue.js:Vue初学
前端面试进阶vue-es6-js
关于vue.js:elementui之eltable的使用合集

站内搜索

-「」