原文网址：Vue--Vuex--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
简介
说明
本文介绍Vue的插件：Vuex。包括：优缺点、使用场景、示例。
官网
官网文档
API vuex-store
优缺点
优点
响应式 属于 vue 生态一环,，能够触发响应式的渲染页面更新。 (localStorage 就不会)可预测的方式改变数据 避免数据污染无需转换数据 JS 原生的数据对象写法（不需要做转换）。（localStorage 需要做转换）
缺点
复杂 适合大应用，不适合小型应用不能持久化（刷新页面后vuex中的state会变为初始状态） 解决方案 结合localStoragevuex-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: '<App/>'})
也可以写成下边这样（按照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: '<App/>'})
业务代码
代码
ComponentA.vue
<template><div class="container"><h3>ComponentA</h3><button @click="increment1">增加：第1个计数器</button><button @click="decrement1">减少：第1个计数器</button><br><br><button @click="increment2">增加：第2个计数器</button><button @click="decrement2">减少：第2个计数器</button></div></template><script>export default {data() {return {count1: 0,count2: 0,}},methods:{increment1() {this.$mit('increment1')},decrement1() {this.$mit('decrement1')},increment2() {this.$mit('increment2')},decrement2() {this.$mit('decrement2')}}}</script><style scoped>.container {margin: 20px;border: 2px solid blue;padding: 20px;}</style>
ComponentB.vue
<template><div class="container"><h3>ComponentB</h3>计数器的值：{{msg}}<!--也可以这么写：--><!--计数器的值：{{this.$store.state.count1}}--></div></template><script>export default {computed:{msg() {return this.$store.state.count1;}}}</script><style scoped>.container {margin: 20px;border: 2px solid blue;padding: 20px;}</style>
ComponentC.vue
<template><div class="container"><h3>ComponentC</h3>计数器的值：{{msg}}<!--也可以这么写：--><!--计数器的值：{{this.$store.state.count2}}--></div></template><script>export default {computed:{msg() {return this.$store.state.count2;}}}</script><style scoped>.container {margin: 20px;border: 2px solid blue;padding: 20px;}</style>
Parent.vue
<template><div class="outer"><h3>父组件</h3><component-a></component-a><component-b></component-b><component-c></component-c></div></template><script>import ComponentA from "./ComponentA";import ComponentB from "./ComponentB";import ComponentC from "./ComponentC";export default {name: 'Parent',components: {ComponentA, ComponentB, ComponentC},data() {return {name: 'Tony',age: 20,phoneNumber: '1234567890'}}}</script><style scoped>.outer {margin: 20px;border: 2px solid red;padding: 20px;}</style>
路由
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
更多示例
state
见：Vuex--state--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
getters
见：Vuex--getters--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
mutations
见：Vuex--mutations--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
actions
见：Vuex--actions--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
module
见：Vuex--module(模块化)--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
