Vuex:vuex是一个专门为vue.js设计的集中式状态管理架构(适合数据量较大的项目)
1.安装
npm install vuex --save //生产环境安装vuex
2.在与router文件下同级下创建store文件以及index.js配置steor
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 存放状态
data:{
count: 1,
}
},
getters: {
// state的计算属性
},
mutations: {
// 更改state中状态的逻辑,同步操作
setcount(state,data){
state.data.count = state.data.count + data
}
},
actions: {
// 提交mutation,异步操作
},
// 如果将store分成一个个的模块的话,则需要用到modules。
//然后在每一个module中写state, getters, mutations, actions等。
// modules: {
// a: moduleA,
// b: moduleB,
// // ...
// }
});
export default store;
3.组件引入vuex来使用
在组件中引入store.js
使用区别:1.在组件中使用{ {$store.state.count}}输出count 的值