在Vue项目中添加vuex

方法一:

        在脚手架创建项目时,选择vuex即可

方法二:

        项目一半时手动添加

1. 安装vuex模块

cnpm  i vuex@3.6 --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. 在组件中使用状态数据

        方式一: 直接调用  this.$store.state.isLogin   或  {{$store.state.isLogin}}

        方式二: 从vuex中按需导入状态数据的映射函数mapState
      import { mapState } from 'vuex'
    //使用映射函数把状态数据state映射到计算属性中
        computed: {
                  ...mapState(["isLogin"])
        }

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

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

Vuex官网文档: Vuex 是什么？ | Vuex