VueX

vuex解释

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），

让其在各个页面上实现数据的共享包括状态，并且可操作

 Vuex分成五个部分：

   1.State：单一状态树

   2.Getters：状态获取

   3.Mutations：触发同步事件

   4.Actions：提交mutation，可以包含异步操作

   5.Module：将vuex进行分模块

vue中各个组件之间传值

1.父子组件

父组件–>子组件，通过子组件的自定义属性：props

子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…);

2.非父子组件或父子组件

通过数据总数Bus，this.$root.$emit(‘事件名’,参数1,参数2,…)

3.非父子组件或父子组件

更好的方式是在vue中使用vuex

1 用组件之间通讯。

2 我们定义全局变量。

vuex安装使用步骤

1.安装（找到vue项目打开vue项目路径运行cmd窗口）

	  npm install vuex -S

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

  store

    index.js

    state.js

    actions.js

    mutations.js

    getters.js

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

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

4.找到vue函数入口man.js，然后导入使用store

vuex模块使用

vuex的核心概念：store、state、getters、mutations、actions

1.每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

2. state.js, 共同维护的一个状态，state里面可以是很多个全局状态

3. getters.js, 获取数据并渲染

4. actions.js, 数据的异步操作

5.mutations.js 处理数据的唯一途径，state的改变或赋值只能在这里

vuex同步异步案列

1.vuexpage1.vue

<template>
  <div>
    <h3>页面一,欢迎来到{{msg}}</h3>
    <button @click="buy">点击(同步)</button>
    <button @click="buyAsync">点击(异步)</button>
    <button @click="doAjax">点击(Ajax)</button>
  </div>
</template>

<script>
    export default {
      data(){
        return{

        };
      },
        computed:{
          msg(){
            return this.$store.state.resturantName;
          }
        },
        methods:{
          buy(){
            this.$store.commit('setResturantName',{
              resturantName:'茶颜'
            });
          },
          buyAsync(){
            this.$store.dispatch('setResturantNameByAsync',{
              resturantName:'一点点'
            });
          },
          doAjax(){
            this.$store.dispatch('doAjax',{
              _this:this
            });
          }

        }
    }
</script>

<style>
</style>

2.vuepage2.vue（通过Getters.js接收第一个组件传递值过来）

<template>
  <div>
    <h3>页面一,欢迎来到{{msg}}</h3>
  </div>
</template>

<script>
    export default {
      data(){
        return{

        };
      },
        computed:{
          msg(){
            return this.$store.getters.getResturantName;
          }
        }
    }
</script>

<style>
</style>

3.异步（Actions.js）