Vuex变量运用

了解Vuex

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作

Vuex分成五个部分：
1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

vuex安装

进入控制器到项目安装
npm install vuex -S

创建store模块，分别维护state/actions/mutations/getters

在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const store = new Vuex.Store({
   
 	state,
 	getters,
 	actions,
 	mutations
 })

 export default store

在main.js中导入并使用store实例

vuex综合案例

需求：两个组件A和B，vuex维护的公共数据是餐馆名：resturantName，默认值：飞歌餐馆，
那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称为A餐馆，则B页面显示的将会是A餐馆，反之B修改同理。
这就是vuex维护公共状态或数据的魅力，在一个地方修改了数据，在这个项目的其他页面都会变成这个数据。

vuePage1.vue

<template>
  <div>
    <h3 style="margin: 70px;">第一个餐馆:{
   {
   title}}</h3>
    <button @click="changeTitle">餐馆易主</button>
    <button @click="changeTitleAsync">两月后易主</button>
    <button @click="doAjax">测试Vuex中使用Ajax</button>
  </div>
</template>

<script>
    export default{
   
      data()