Vue中的状态管理

全局储存

通过创建包含在组件之间共享数据存储的存储模式，可以实现一些简单的状态管理。
存储（Store）可以管理应用程序的状态以及负责更改状态的方法。

//定义 Store 储存

export const stroe = {
  state: {
    numbers: [1, 2, 3]
  },
  addNumber(newNumber) {
    this.state.numbers.push(newNumber)
  }
}

//定义 Display 储存

<template>
  <div>
    <h4>{{stroeNumber}}</h4>
  </div>
</template>
<script>
import { stroe } from './Store.js'
export default {
  data() {
    return {
      stroeNumber: stroe.state.numbers
    }
  }
}
</script>
<style scoped>
</style>

//定义 Submit 储存

<template>
  <div>
    <input type="text" name="" id="" v-model="number">
    <button @click="addNumber(number)">add number</button>
  </div>
</template>
<script>
import { stroe } from "./Store.js";
export default {
  data() {
    return {
      number: ""
    }
  },
  methods: {
    addNumber(number) {
      stroe.addNumber(Number(number))
      this.number = ''
    }
  }
}
</script>
<style scoped>
</style>

Vuex

npm i vuex -D //安装依赖

创建store.js

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

Vue.use(Vuex);

//state 只是一个包含需要在应用程序中共享的属性的对象。
const state = {  
  numbers: [1, 2, 3],
  sex: '男'
}

// mutations是负责直接改变存储状态的函数。
// 在Vuex中，mutations总是以state作为第一个参数。
// 此外，actions也可以不作为第二个参数传递有效负载：

const mutations = { 
  0.(state, payload) {
    state.numbers.push(payload);
  },
  SET_SEX(state, payload) {
    state.sex = payload
  }
}

//actions可以调用mutations。在提交mutations之前，actions还负责所有异步调用。
//actions可以访问context对象，该对象提供对state（使用context.state）、
//getter（使用context.getters）和commit函数（context.commit）的访问。

const actions = {
  addNumber(context, number) {
    context.commit("ADD_NUMBER", number)
  },
  setSex(context, sex) {
    context.commit('SET_SEX', sex)
  }
}


//Vuex存储中的getters就像组件中的计算属性一样。
//getters主要用于执行一些计算和操作，以便在组件访问这些信息之前存储状态。

const getters = {
  getNumbers(state) {
    return state.numbers
  },
  getSex(state) {
    return state.sex
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './components/vuex-store/store'

Vue.config.productionTip = false

// EvemtBus是一个Vue实例，用于支持独立组件之间订阅和发布自定义事件。
export const EventBus = new Vue()



/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

DisplayVuex.vue

<template>
  <div>
    <h2>{{getNumbers}}</h2>
    <h3>{{getSex}}</h3>
  </div>
</template>
<script>
export default {
  computed: {
    getNumbers() {
      return this.$store.getters.getNumbers
    },
    getSex() {
      return this.$store.getters.getSex
    }
  }
}
</script>

SubmitVuex.vue

<template>
  <div>
    <label>数组：</label>
    <input type="text" name="" id="" v-model="number">
    <button @click="addNumber(number)">Add number</button>
    <br>
    <label>性别：</label>
    <input type="text" v-model="sex">
    <button @click="setSex(sex)">set Sex</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      number: '',
      sex: ''
    }
  },
  methods: {
    addNumber(number) {
      console.log(number)
      this.$store.dispatch('addNumber', Number(number))
      this.number = ''
    },
    setSex(sex) {
      this.$store.dispatch('setSex', sex)
      this.sex = ''
    }
  }
}
</script>
<style scoped>
</style>

转载：https://www.w3cplus.com/vue/managing-state-in-vue-js.html