方法一 , 在脚手架创建项目时,选择vuex即可
方法二: 在项目写一半时手动添加
1, 下载安装vuex模块
cnpm i vuex —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”])
}
登录状态: {{isLogin}}
6, 在组件中修改状态数据
this.$store.commit("setLogin", true)