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

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>             
    <h3>平方：{{$store.getters.square}}h3>     
    <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)">-2button>
    <button @click="add(5)">+5button>
  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>