vuex的使用场景:
使用场景【状态在组件间共享】
能解决多个界面间的共享问题,统一响应式管理
用户登陆状态,用户、名称、头像、地理位置等 可以保存状态
商品收藏,购物车物品等【可在关闭前统一上传】
需要共享的状态信息
在文件目录下创建store文件 将vuex仓库封装在index.js中- 项目–src–store–index.js
index.js书写【官方建议单一状态树,只将数据保存在一个store中】
导入插件
安装插件
创建对象
导出对象
//index.js//1.导入插件
import Vue from 'vue'
import Vuex from 'vuex'
//2.安装插件
Vue.use(Vuex)
//3.创建对象
const store = new Vuex.Store({
state:{ //共享的数据
age:18
},
mutations:{ //同步方法 类似于methods 可接收传入参数payload=》obj|arr|num
increment(state,payload){
state.age++;
}
},
actions:{ //异步方法
updateinfo(context){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
context.commit('increment')
resolve()
},1000)
})
}
},
getters:{ //将数据处理后返回 类似于computed
doubleage(state){
return function(age){
return age++;
}
}
},
modules:{//定义模块
a:{
state:{},
mutations:{},
actions:{},
getters:{}
}
}
})
//3.导出store模块
export default store
https://www.cnblogs.com/cc123nice/p/12603649.html