Vuex——vue的集中式存储仓库

Vuex的介绍

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

Vuex的基本结构

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {       //用于存放变量，类似于data
  },
  mutations: {   //用于修改状态，类似于methods
  },
  getters: {     //用于定义函数方法，类似于计算属性computed
  },
  actions: {     //用于代替mutations执行异步操作
  },
  modules: {     //类似于components
  }
})

Vuex的基本使用

• 调用store（仓库）中的变量和方法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    add(state) {
      state.num ++
    },
    sub(state) {
      state.num --
    }
  },
  getters: {
    square(state) {
      return state.num * state.num
    }
  }
})

<template>
  <div id="app">
    <h2>{{$store.state.num}}</h2>             <!-- 调用state中的变量 -->
    <h3>平方：{{$store.getters.square}}</h3>     <!-- 调用getters中的square方法 -->
    <button @click="sub">-</button>
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    add(n) {
      this.$store.commit('add')  //调用mutations中的add方法
    },
    sub() {
      this.$store.commit('sub')   //调用mutations中的sub方法
    }
  },
}
</script>

• vuex的mutations方法携带参数

<template>
  <div id="app">
    <h2>{{$store.state.num}}</h2>
    <button @click="sub(2)">-2</button>
    <button @click="add(5)">+5</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    add(x) {
      this.$store.commit({               //这种方式可传递多个变量，多个变量会作为一个对象被接收
        type: 'add',
        x,
        //...
      })
    },
    sub(x) {
      this.$store.commit('sub', x)       //这种方式只可传递一个变量
    }
  },
}
</script>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    add(state, n) {      //这里的n是一个对象
      state.num += n.x
    },
    sub(state, n) {      //这里的n是一个变量
      state.num -= n
    }
  }
})

• vuex的getter方法也可返回一个函数和传递参数

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    students: [
      {id: 101, name: '张三'},
      {id: 102, name: '李四'},
      {id: 103, name: '王五'},
      {id: 104, name: '赵六'},
    ]
  },
  getters: {
    getid(state) {
      return function(id) {
        return state.students.filter(s => s.id == id)
      }
    }
  }
})

<template>
  <div id="app">
    <h2>获取学号是102的学生信息：{{$store.getters.getid(102)}}</h2>
  </div>
</template>