Vuex 快速入门(简单易懂)

发布时间：2020-12-16 23:31:20 所属栏目：百科来源：网络整理

导读：一、vuex介绍（1）vuex是什么？ 1. 借鉴了Flux、Redux、The Elm Architecture 2. 专为 Vue.js 设计的状态管理模式 3. 集中式存储和管理应用程序中所有组件的状态 4. Vuex 也集成到 Vue 的官方调试工具 5. 一个 Vuex 应用的核心是 store（仓库，一个容器）

一、vuex介绍

（1）vuex是什么？

1. 借鉴了Flux、Redux、The Elm Architecture

2. 专为 Vue.js 设计的

状态管理模式

3. 集中式存储和管理应用程序中所有组件的状态

4. Vuex 也集成到 Vue 的官方调试工具

5. 一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的

状态 (state)

。

（2）什么情况下我应该使用 Vuex？

1. 不适用：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的store 模式。

2. 适用于：中大型单页应用，你可能会考虑如何

把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为

，解决问题如下：

① 多个视图使用于同一状态：

传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力

采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码

（3）Vuex 和单纯的全局对象有何不同？

1.Vuex 的状态存储是响应式的

当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2.你不能直接改变 store 中的状态

改变 store 中的状态的唯一途径就是显式地

提交 (commit) mutation

，方便我们跟踪每一个状态的变化。

二、vuex安装

* vue cli 3 中搭建脚手架预设时选择了“vuex”后便安装了vuex，可跳过此步阅读

（1）
2.包管理器安装：

然后，将下列代码添加到你使用 Vuex 之前的一个地方：

三、使用

（1）使用介绍

1.搭建store实例

①. 在创建vuex实例的地方引入vue、vuex，使用vuex：

Vue.use(Vuex); //使用 vuex

②. 如果你的actions中用到 store.dispath(),要引入store

③. new 一个 Vuex.Store 实例，并注册 state、mutations、actions、getters到Vuex.Store 实例中

ps. 你可以像上面那样将“属性和值”直接写在实例中，当代码量大时，你也可以分别写个.js文件，如下图：

然后引入到 store/index.js 注册到vuex实例中，如：

2.创建好 vuex.store 后，你需要在入口文件 main.js 中引入 store 并注册到 vue 实例中，这样就可以在任何组件使用store了：

3.在组件中使用：

①. 引入vuex中各属性对应的辅助函数：

②. 使用store中的状态数据、方法：

使用方法有很多，这种事最简单实用的，更多可以查看官网学习：https://vuex.vuejs.org/zh/

（2）具体demo

来个简单易懂的计数

eg：store.js

Vue.use(Vuex); //使用 vuex

export default new Vuex.Store({
state: {
// 初始化状态
count: 0,someLists:[]
},mutations: {
// 处理状态
increment(state,payload) {
state.count += payload.step || 1;
}
},actions: {
// 提交改变后的状态
increment(context,param) {
context.state.count += param.step;
context.commit('increment',context.state.count)//提交改变后的state.count值
},incrementStep({state,commit,rootState}) {
if (rootState.count < 100) {
store.dispatch('increment',{//调用increment()方法
step: 10
})
}
}
},getters: {
//处理列表项
someLists: state =>param=> {
return state.someLists.filter(() => param.done)
}
}
})

使用时，eg：

main.js：

Vue.config.productionTip = false

new Vue({
router,store,//注册store(这可以把 store 的实例注入所有的子组件)
render: h => h(App)
}).$mount('#app')

views/home.vue：

运行结果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!