vue状态管理存取数据_Vue中的状态管理

全局储存

通过创建包含在组件之间共享数据存储的存储模式，可以实现一些简单的状态管理。

存储(Store)可以管理应用程序的状态以及负责更改状态的方法。

//定义 Store 储存

export const stroe = {

state: {

numbers: [1, 2, 3]

},

addNumber(newNumber) {

this.state.numbers.push(newNumber)

}

}

//定义 Display 储存

{{stroeNumber}}

import { stroe } from './Store.js'

export default {

data() {

return {

stroeNumber: stroe.state.numbers

}

}

}

//定义 Submit 储存

add number

import { stroe } from "./Store.js";

export default {

data() {

return {

number: ""

}

},

methods: {

addNumber(number) {

stroe.addNumber(Number(number))

this.number = ''

}

}

}

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: ''

})

DisplayVuex.vue

{{getNumbers}}

{{getSex}}

export default {

computed: {

getNumbers() {

return this.$store.getters.getNumbers

},

getSex() {

return this.$store.getters.getSex

}

}

}

SubmitVuex.vue

数组：

Add number

性别：

set Sex

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 = ''

}

}

}