Vuex状态管理总结

框架

浏览数:130

2019-10-9

AD:资源代下载服务

一、什么是 Vuex

1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

2、Vuex 采用集中式存储和管理应用中所有组件的状态

3、Vuex 应用的核心是 store(仓库)– 包含 state(组件中的共享状态)和 mutations(改变状态的方法)

二、Vuex 的安装

1、在项目根目录终端引入:

npm install vuex --save

2、在 main.js 中加入:

import store from './store'

三、Vuex 核心概念

1、State

state 可以看作是所有组件的 data,用于保存所有组件的公共数据。

2、Getters

getters 可以看作是所有组件的 computed 属性,getters 的返回值会根据它的依赖被缓存起来,只有当它的依赖值发生改变才会被重新计算。

3、Mutations

mutations 可以看作是 store 中的 methods,其中保存着更改数据的回调函数。

4、Actions

actions 类似于 mutations,区别在于:

  • actions 提交的是 mutations 而非直接变更状态
  • actions 中可以包含异步操作,而mutations 中不允许出现异步

5、Modules

由于使用单一状态树,当应用变得非常复杂时,store 对象会变得相当臃肿,Vuex 允许将 store 分割成模块(module)。每个模块拥有自己的 state、mutations、actions、getters、甚至是嵌套子模块——从上至下进行同样方式的分割:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

四、Vuex 的使用

1、Vuex 获取 store 数据

通过 store.state 来获取状态对象,示例:

store.js 文件:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 1
  },
  mutations: {
    changeFunction (state, num) {
      state.num++
    }
  }
})

main.js 文件:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

views/demo.vue 文件:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getNum">getNum</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '0'
    }
  },
  methods: {
    getNum () {
      this.msg = this.$store.state.num
    }
  }
}
</script>

运行效果:

2、Vuex 修改 store 数据

通过 store.dispatch 方法触发状态变更,示例:

store.js 文件:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    num: 1
  },
  mutations: {
    changeFunction (state, num) {
      state.num++
    }
  },
  actions: {
    changeNum ({ commit }, obj) {
      commit('changeFunction', obj)
    }
  }
})

main.js 文件:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

views/demo.vue 文件:

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getNum">getNum</button>
    <button @click="changeNum">changeNum</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '0'
    }
  },
  methods: {
    getNum () {
      this.msg = this.$store.state.num
    },
    changeNum () {
      this.$store.dispatch('changeNum', 100000)
      this.msg = this.$store.state.num
    }
  }
}
</script>

运行效果:

 

作者:Leophen