Vue学习之Vuex的使用详解 Vue学习之Vuex的使用详解

简介
优缺点

优点
缺点

使用场景

示例

安装Vuex并引入

1.安装vuex
2.编写vuex的store
3.main.js引入CounterStore.js

业务代码

测试

简介说明
本文介绍Vue的插件：Vuex。包括：优缺点、使用场景、示例。
官网
官网文档
【Vue学习之Vuex的使用详解】API vuex-store

优缺点
优点
1.响应式
属于 vue 生态一环,，能够触发响应式的渲染页面更新。 (localStorage 就不会)
2.可预测的方式改变数据
避免数据污染
3.无需转换数据
JS 原生的数据对象写法（不需要做转换）。（localStorage 需要做转换）

缺点
1.复杂
适合大应用，不适合小型应用
2.不能持久化（刷新页面后vuex中的state会变为初始状态）
解决方案
结合localStorage
vuex-persistedstate插件

使用场景当我们多个页面需要共享数据时就可以使用Vuex。
实际开发中我们一般在下面这种情况使用它：
当前登录用户的信息
购物车的信息
收藏的信息
用户的地理位置

示例本处用计数器来测试：一个组件修改计数器的值，其余两个不相关组件可以监测到时计数器值的改变。
做法：一个组件(ComponentA）将数据共享给另外两个不相关组件（ComponentB和ComponentC），外部用Parent.vue放置这三个组件。

安装Vuex并引入
1.安装vuex
在工程目录下执行：npm install vuex

2.编写vuex的store
创建目录store，在其下边创建CounterStore.js，内容如下：

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const couterStore = new Vuex.Store({state: {count1: 0,count2: 0,},mutations: {increment1(state) {state.count1++; },decrement1(state) {state.count1--; },increment2: state => state.count2++,decrement2: state => state.count2--,}}); export default couterStore;

3.main.js引入CounterStore.js

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import CouterStore from './store/CounterStore' Vue.config.productionTip = false /* eslint-disable no-new */new Vue({el: '#app',router,store: CouterStore,components: { App },template: ''})

按照JS语法，key与value重名时可以简写：（很多教程这么写）

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import store from './store/CounterStore' Vue.config.productionTip = false /* eslint-disable no-new */new Vue({el: '#app',router,store,components: { App },template: ''})

业务代码代码
ComponentA.vue

.container {margin: 20px; border: 2px solid blue; padding: 20px; }

ComponentB.vue

.container {margin: 20px; border: 2px solid blue; padding: 20px; }

ComponentC.vue

.container {margin: 20px; border: 2px solid blue; padding: 20px; }

Parent.vue

.outer {margin: 20px; border: 2px solid red; padding: 20px; }

路由

import Vue from 'vue'import Router from 'vue-router'import Parent from "../components/Parent"; Vue.use(Router) export default new Router({routes: [{path: '/parent',name: 'Parent',component: Parent,}],})

测试
访问： http://localhost:8080/#/parent