vuex基础-介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
中文官网:https://vuex.vuejs.org/zh/
我们理解:
- vuex是采用集中式管理组件依赖的共享数据的一个工具,可以解决不同组件数据共享问题。
即:vuex是用来管理组件之间的共享数据
看图结论:
- state 管理数据,管理的数据是响应式的,当数据改变时驱动视图更新。
- mutations 更新数据,state中的数据只能使用mutations去改变数据。
- actions 请求数据,响应成功后把数据提交给mutations
vuex管理数据的逻辑:
vuex提供的管理数据流程:(含使用的方法)——没有父子之间传值简单
1.组件内部Vue Components绑定了一个button的点击事件
2.事件调用了Dishpatch
3.触发了Actions的方法
4.去拿后台数据Backend API,模拟了2s
5.拿到后台数据,通过Commit提交给Mutations
6.提交给Mutations之后,Mutations内部修改了State的状态数据
7.State里面的数据是响应式的
8.当数据修改时,会驱动视图组件页面内容的更新
vuex基础-初始化功能
初始化:
- 第一步:
npm i vuex --save
- 第二步:
import vuex from 'vuex'
- 第三步:
Vue.use(vuex)
- 第四步:
const store = new Vuex.Store({...配置项})
- 第五步:在根实例配置 store 选项指向 store 实例对象
在src/main.js中配置:
import Vue from 'vue'
// 配置vuex的步骤
// 1. 安装 npm i vuex
// 2. 导入
import Vuex from 'vuex'
// 3. 注册
Vue.use(vuex)
// 4. 初始化
const store = new Vuex.Store({
// 配置项
})
// 5. 挂载根实例 其他组件访问vuex提供功能
new Vue({
el: '#app',
store
})
// 5. 挂载根实例 其他组件访问vuex提供功能
//new Vue({
// store,
// render: h => h(App),
//}).$mount('#app')