Vuex

一、Vuex的核心组成

变量传值的演变形式
图解Vuex各组件

官方图解Vuex

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），
让其在各个页面上实现数据的共享包括状态，并且可操作
Vuex分成五个部分：
1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

二、Vuex版本问题及store.js的使用

1、安装

安装最新版本

npm install vuex -S

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

import store from './store'

      new Vue({
el: '#app',
router,
store, //在main.js中导入store实例
components: {
App
},
template: '<App/>',
data: {
//自定义的事件总线对象，用于父子组件的通信
Bus: new Vue()
}
      })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5、测试

三、Vuex中的异步同步操作

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

  export default {
    // type(事件类型)： 其值为setResturantName
    // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器
    setResturantName: (state, payload) => {
      state.resturantName = payload.resturantName;
1
2
3
4
5

}

  注1：mutations中方法的调用方式
       不能直接调用this.$store.mutations.setResturantName('KFC')，必须使用如下方式调用：
       this.$store.commit(type,payload);

       // 1、把载荷和type分开提交
       store.commit('setResturantName',{
         resturantName:'KFC'
       })

       // 2、载荷和type写到一起
      store.commit({
        type: 'setResturantName',
        resturantName: 'KFC'
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注2：一定要记住，Mutation 必须是同步函数。为什么呢？异步方法，我们不知道什么时候状态会发生改变，所以也就无法追踪了
如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了
mutations: {
someMutation (state) {
api.callAsyncMethod(() => {
state.count++
})
}
}
异步加载：
Action类似于 mutation，不同在于：
1.Action提交的是mutation，而不是直接变更状态
2.Action可以包含任意异步操作
3.Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性
但是他们并不是同一个实例，context 包含：
1. state、2. rootState、3. getters、4. mutations、5. actions 五个属性
所以在这里可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

四、Vuex后台交互

action.js

let _this = payload._this;
    let url=_this.axios.urls.SYSTEM_MENU_TREE;
    _this.axios.post(url,{}).then(r=>{
      console.log(r)
    }).catch(e=>{

    });
1
2
3
4
5
6
7

vuePage1:

 _this:this
1

五、本篇总代码

1、router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Login from '@/views/Login'
import Reg from '@/views/Reg'
import Articles from '@/views/sys/Articles'
import VuexPage1 from '@/views/sys/VuexPage1'
import VuexPage2 from '@/views/sys/VuexPage2'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login
    },
    {
      path: '/Reg',
      name: 'Reg',
      component: Reg
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children: [{
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        },
        {
          path: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/sys/Articles',
          name: 'Articles',
          component: Articles
        },
        {
          path: '/sys/VuexPage1',
          name: 'VuexPage1',
          component: VuexPage1
        },
        {
          path: '/sys/VuexPage2',
          name: 'VuexPage2',
          component: VuexPage2
        }
      ]
    }
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

2、store/action.js

export default {
  setResNameAsync: (context, payload) => {
    // 异步修改值 在异步方法中调用了同步方法
    // context指的是Vuex的上下文，相当于 this.$store
    // 此代码6s后执行
    setTimeout(function(){
      context.commit("setResName",payload);
    },6000);

    let _this = payload._this;
    let url=_this.axios.urls.SYSTEM_MENU_TREE;
    _this.axios.post(url,{}).then(r=>{
      console.log(r)
    }).catch(e=>{

    });
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3、store/getters.js

export default{
  getResName:(state)=>{
    return state.resName;
  }
}

1
2
3
4
5
6

4、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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5、store/mutations.js

export default{
  setResName:(state,payload)=>{
    // state对象就对应了state.js中的对象
    // payload截荷 对应的 传递的 json对象参数{name:zs,age:12}
    state.resName = payload.resName;
  }
}

1
2
3
4
5
6
7
8

6、store/state.js

export default{
  resName:'aaa'
}

1
2
3
4

7、views/sys/VuexPage1.vue

<template>
  <div>
    <p>
      页面1：欢迎来到{{msg}}
    p>
    <button @click="buy">盘它button>
    <button @click="buyAsync">最终店长button>
  div>
template>

<script>
  export default{
    name:'VuexPage1',
    data(){
      return {
      }
    },
    methods:{
      buy(){
        console.log(this.$store);
        // 通过commit方法会调用mutations.js文件中定义好的方法
        this.$store.commit("setResName",{
          resName:'KFC'
        })
      },
      buyAsync(){
        this.$store.dispatch("setResNameAsync",{
          resName:'麦当劳',
          _this:this
        })
      }
    }
    ,
    computed:{
      msg(){
        // 从vuex的state文件中获取值
        // return this.$store.state.resName;//不推荐，不安全
        // 通过getter.js文件获取state.js中定义的变量值
        return this.$store.getters.getResName;
      }
    }
  }
script>

<style>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

8、views/sys/VuexPage1.vue

<template>
  <div>
    <p>
      页面2：欢迎来到{{msg}}
    p>
    <button @click="buy">盘它button>
  div>
template>

<script>
  export default{
    name:'VuexPage1',
    data(){
      return {
      }
    }
    ,
    computed:{
      msg(){
        // 从vuex的state文件中获取值
        // return this.$store.state.resName;//不推荐，不安全
        // 通过getter.js文件获取state.js中定义的变量值
        return this.$store.getters.getResName;
      }
    }
  }
script>

<style>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

运行效果：