vuex的使用和后台交互

一、vuex是什么？

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

Vuex分成五个部分：

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

二、vuex的使用步骤

1.安装

npm install vuex -S

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

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.在main.js中导入并使用store实例 

三、vuex的传值问题

1.先按照数据库路径建立两个vue

VuexPage1 内容

 VuexPage2 内容

 两个界面的msg是相同的区别在于分别显示页面一和页面二

2.在state.js中定义变量

export default{
  aaName:"小格餐馆"

}

3.拿值

4.效果展示

 一般不建议这样拿值

4.vuex存值

 Mutations.js中定义

export default {
  setAaName: (state, payload) => {
    state.aaName = payload.aaName
  }
}

参数payload为载荷，是一个保存要传递参数的容器

VuexPage1

<template>
  <div>
    <h2>页面一：{{msg}}</h2>
    <button @click="pa">点我</button>
  </div>
</template>

<script>
  export default {
    name: 'VuexPage1',
    data() {
      return {

      }
    },
    methods: {
      pa() {
        this.$store.commit("setAaName", {
          aaName: "小宝餐馆"
        })
      }
    },
    computed: {
      msg() {
        return this.$store.state.aaName

      }
    }
  }
</script>

<style>
</style>

VuexPage2

 当触发VuexPage1中的点击事件时，VuexPage2也会发生改变

 效果展示

当点击后，msg发生变化

 随后VuexPage2

Mutation 必须是同步函数

四、veux取值

Getters.js

export default{
getAaName:(state)=>{
  return state.aaName
}
}

上面提到一般不建议那样拿值，所以VuexPage1中拿值的代码改为

效果一样可以实现

五、异步修改值

Action.js

export default {
  setAaNameAsync: (context, payload) => {
    setTimeout(function(){
      context.commit("setAaName",payload)
    },6000)
  }
}

6秒后触发 

 VuexPage1 异步使用dispatch

<template>
  <div>
    <h2>页面一：{{msg}}</h2>
    <button @click="pa">点我</button>
    <button @click="last">最终name</button>
  </div>
</template>

<script>
  export default {
    name: 'VuexPage1',
    data() {
      return {

      }
    },
    methods: {
      pa() {
        this.$store.commit("setAaName", {
          aaName: "小宝餐馆"
        })
      },
      last() {
        this.$store.dispatch("setAaNameAsync", {
          aaName: "归化餐馆"
        })
      }
    },
    computed: {
      msg() {
        /* return this.$store.state.aaName */
        return this.$store.getters.getAaName;
      }
    }
  }
</script>

<style>
</style>

效果展示

当我点击最终name按钮 6秒后

页面二

 六、vuex与后台服务器数据交互

在Mutations.js中实现与后台交互

 1.Mutations.js

export default {
  setAaName: (state, payload) => {
    state.aaName = payload.aaName
  },
  doAjax:(state, payload) =>{
    let _this=payload._this;
    let url = _this.axios.urls.SYSTEM_MENU_TREE;
    _this.axios.post(url, {}).then((resp) => {
      console.log(resp);
    }).catch(function(error) {
      console.log(error);
    });
  }

}

ajax中的this不是vue根目录，所以获取不到url ，必须在页面中将this作为参数传递过来

2.页面添加点击事件

 效果展示

 数据交互成功