Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 timetravel 调试、状态快照导入导出等高级调试功能。

我们提供的服务有:成都做网站、成都网站设计、微信公众号开发、网站优化、网站认证、滦州ssl等。为数千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的滦州网站制作公司
下面是 Vuex 的五个核心属性:
1. State
State 是 Vuex 的基础,用于存储应用的状态,每个 Vuex 实例都有一个单一的 state 对象,该对象以模块为组织形式,每个模块包含一组属性。
const state = {
count: 0,
info: 'This is global state'
}
2. Getters
Getters 类似于 Vue 的计算属性,用于从 state 中派生出一些状态,对一个数组进行过滤并计数:
const getters = {
doneTodosCount: (state) => {
return state.todos.filter(todo => todo.done).length
}
}
3. Mutations
Mutations 是唯一更改 store 中状态的方法,每个 mutation 都有一个字符串类型的事件类型和对应的处理函数,执行 mutation 时会调用对应的处理函数来改变 state 的状态:
const mutations = {
increment (state) {
state.count++
}
}
4. Actions
Actions 类似于 mutations,不同之处在于:Actions 提交的是 mutation,而不是直接变更状态,Actions 可以包含任意异步操作,因此可以在其中进行 API 请求等操作。
const actions = {
increment ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
5. Modules
Modules 可以将 store 分割成多个模块(module),每个模块拥有自己的 state、getter、mutation、action、甚至是嵌套子模块——从上至下进行同样方式的分割:
const moduleA = {
state: () => ({ ... }), // 定义该模块状态
mutations: { ... }, // 同步操作
action: { ... } // 异步操作
}
const store = new Vuex.Store({
modules: {
a: moduleA
}
})
分享题目:vuex的五个属性
网页链接:http://www.jxjierui.cn/article/djijoei.html


咨询
建站咨询
