vuex状态管理模式（一）（state）

Vuex

• Vuex官网

概述

是什么

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式；
• 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

解决什么问题

• 多个视图依赖于同一状态；
• 来自不同视图的行为需要变更同一状态。

怎么做

• 把组件的共享状态抽取出来，以一个全局单例模式管理。

优势

• 组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
• 通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

安装

• npm install vuex --save

使用

state

• 全局状态
• 在vue组件中获取
  • 计算属性 this.$store.state.age + 10;
  • mapState
    • 动机：当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
    • 形式：对象、数组
    • 与局部计算属性混合使用：展开运算符 ...

示例

store/index.js

• 在Vuex实例中注册三个变量，为全局状态

import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
        msg:"Hi vuex",
        name:"小红",
        age:18,
    }
});
export default store;

组件CompA
获取变量值

<template>
  <div>
    CompA
    {{msg}}
    {{mymsg}}
    {{name}}
    {{age}}
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
   data() {
    return {
      // msg: this.$store.state.msg,
    };
  },
  computed: {
     //返回对象，需要解构，展开运算符
    ...mapState(["msg","name","age"]),
    //起别名
    ...mapState({
      mymsg:"msg",
    }), 
  },
  mounted() {
    console.log(this.$store.state.msg);
  },
};
</script>
<style scoped></style>