Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第10章 Vuex状态管理 10.1 Vuex基础应用
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
第10章 Vuex状态管理
文章目录
- Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
- 第10章 Vuex状态管理
- 10.1 Vuex基础应用
- 10.1.1 安装Vuex
- 10.1.2 引用Vuex
- 10.1.3 创建Vuex实例对象
- 10.1.4 将Vuex实例对象挂载到Vue对象
- 10.1.5 在Vue组件中使用Vuex
- 10.1.6 Vuex代码分离
Vuex相当于一个数据仓库，所有组件都可以到仓库中存取数据。
10.1 Vuex基础应用
官方文档：Vuex是一个专为Vue.js应用程序开发的状态管理模式。
10.1.1 安装Vuex
npm install vuex -S
10.1.2 引用Vuex
main.js
import Vuex from 'vuex'
Vue.use(Vuex)
10.1.3 创建Vuex实例对象
var store = new Vuex.Store({
state : {
//相当于Vue中的data
num : 10
}
})
10.1.4 将Vuex实例对象挂载到Vue对象
10.1.5 在Vue组件中使用Vuex
运行效果
这里使用了插值表达式加上$store.state.公共数据，运行代码，在HelloWorld组件中就可以拿到Vuex中定义的属性，这是Vuex的基本用法。
10.1.6 Vuex代码分离
为了方便后期维护Vuex代码
在src目录下新建store文件夹
在store文件夹下新建index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
state : {
num : 20
}
})
export default store
- 首先引入Vue，因为Vuex依赖Vue
- 使用export default 导出 store 模块，要遵循common.js规范
在main.js中引入模块即可
运行效果
