vuex状态管理

方法一 , 在脚手架创建项目时,选择vuex

1, 在组件中使用状态数据 从vuex中按需导入状态数据的映射函数mapState

示例:登录状态: {{isLogin}}

import { mapState } from 'vuex'

使用映射函数把状态数据state映射到计算属性中

computed: {
...mapState(["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"])
}

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

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