网站跳出,打开上次浏览的网站模板,wordpress仿next主题,网站 建设的售后服务目录
一、引言
1.1. vuex的概念
1.2. vuex使用场景
1.3. 优势
二、创建演示项目
2.1. 构建项目步骤
2.2. 项目最终生成结构
2.3. 创建项目文件
2.3.1. App.vue
2.3.2. Son1.vue
2.3.3. Son2.vue
三、创建一个空仓库
3.1. 安装vuex
3.2. 新建仓库
3.3. 挂载仓库…目录
一、引言
1.1. vuex的概念
1.2. vuex使用场景
1.3. 优势
二、创建演示项目
2.1. 构建项目步骤
2.2. 项目最终生成结构
2.3. 创建项目文件
2.3.1. App.vue
2.3.2. Son1.vue
2.3.3. Son2.vue
三、创建一个空仓库
3.1. 安装vuex
3.2. 新建仓库
3.3. 挂载仓库
3.4. 完整代码
3.4.1. main.js
3.4.2. index.js
四、提供/访问vuex数据
4.1. 提供数据
4.2. 使用数据
4.2.1. 通过 store 直接访问
4.2.2. 通过辅助函数 (简化) 一、引言
1.1. vuex的概念
vuex 是一个 vue 的 状态管理工具在我们的开发过程中状态本质上就是数据。vuex 相当于是一个插件可以帮我们管理 vue 通用的数据 (多组件共享的数据)。
1.2. vuex使用场景
① 某个状态在很多个组件中使用 (如个人信息)
② 多个组件共同维护一份数据 (购物车) 1.3. 优势
① 共同维护一份数据数据集中化管理。
② 支持响应式变化
③ 操作简洁 (vuex提供了一些辅助函数) 二、创建演示项目 基于VueCli脚手架构建一个vuex[多组件数据共享]的演示案例项目该项目的演示效果是三个组件, 共享一份数据 1. 任意一个组件都可以修改数据 2. 三个组件的数据是同步的 2.1. 构建项目步骤 2.2. 项目最终生成结构 2.3. 创建项目文件
2.3.1. App.vue
templatediv idapph1根组件/h1input typetextSon1/Son1hrSon2/Son2/div
/templatescript
import Son1 from ./components/Son1.vue
import Son2 from ./components/Son2.vue
export default {name: app,data () {return {}},components: {Son1,Son2}
}
/scriptstyle/style2.3.2. Son1.vue
templatediv classboxh2Son1 子组件/h2从vuex中获取的值label/labelbrbutton值 1/button/div
/templatescript
export default {name: Son1Com
}
/scriptstyle langcss scoped
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
/style2.3.3. Son2.vue
templatediv classboxh2Son2 子组件/h2从vuex中获取的值label/labelbrbutton值 - 1/button/div/templatescript
export default {name: Son2Com
}
/scriptstyle langcss scoped
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
/style三、创建一个空仓库
注版本vue2安装的vuex版本为3版本vue3安装的vuex版本为4 3.1. 安装vuex
yarn add vuex3 3.2. 新建仓库 创建 store/index.js 专门存放 vuex 配置使用vuex Vue.use(Vuex) 创建仓库 new Vuex.Store() 3.3. 挂载仓库 在 main.js 中导入挂载到 Vue 实例上 3.4. 完整代码 3.4.1. main.js import Vue from vue
import App from ./App.vue
import store from /store/indexVue.config.productionTip falsenew Vue({render: h h(App),store
}).$mount(#app)3.4.2. index.js // 存放的是vuex相关的核心代码
import Vue from vue
import Vuex from vuex// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库空仓库
const store new Vuex.Store()// 导出给main.js使用
export default store四、提供/访问vuex数据
4.1. 提供数据
State 提供唯一的公共数据源所有共享的数据都要统一放到 Store 中的 State 中存储。
在 state 对象中可以添加我们要共享的数据。 4.2. 使用数据
4.2.1. 通过 store 直接访问 4.2.2. 通过辅助函数 (简化)
mapState是辅助函数帮助我们把 store中的数据 自动 映射到 组件的计算属性中其功能如同下列代码 import { mapState } from vuex mapState([count]) computed: { ...mapState([count]) } 标准使用方法
