vue状态管理

方法一 , 在脚手架创建项目时,选择vuex
1, 在组件中使用状态数据 
    // 从vuex中按需导入状态数据的映射函数mapState
      import { mapState } from 'vuex'
    // 使用映射函数把状态数据state映射到计算属性中
        computed: {
          ...mapState(["isLogin"])
        }
    <!-- state在映射到计算属性中之后,当作计算属性来用 -->
        登录状态: {{isLogin}}

2, 在组件中修改状态数据

    this.$store.commit("setLogin", true)

------------------------------------------------------------------------
方法二:  在项目写一半时手动添加(最新版为5.0.0, 此处示例为v3.6.2版本)
1, 下载安装vuex模块 (安装最新版4.0会报错)
    cnpm i vuex@3.6.2 --save
2, 在/src目录下新建文件   /src/store/index.js   导入vuex
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
3, 在/src/store/index.js中创建管理仓库, 并导出
    export default new Vuex.Store({
          state: {
         },
          mutations: {
          }
    })
4, 在main.js中导入store/index.js状态管理仓库, 帮把它添加到vue根组件中
    import store from './store'
    new Vue({router, store})
5, 在组件中使用状态数据 
    // 从vuex中按需导入状态数据的映射函数mapState
      import { mapState } from 'vuex'
    // 使用映射函数把状态数据state映射到计算属性中
        computed: {
          ...mapState(["isLogin"])
        }
    <!-- state在映射到计算属性中之后,当作计算属性来用 -->
        登录状态: {{isLogin}}

6, 在组件中修改状态数据

    this.$store.commit("setLogin", true)