目录
Vuex
state属性
getters属性
mutations属性
actions属性
modules属性
辅助函数
Vuex
状态管理模式 维护公共状态 公共数据
使用状态机模块维护状态
A组件中分发工作（发起异步请求)--->获取数据--->提交突变(将数据提交给突变 )
通过突变修改状态 其他页面就可以渲染数据
state属性
维护状态 类似于data 存储数据
// 类似于data 存储公共状态 存储数据state: {public: 'hello vuex',token: ""},getters属性
对state中的数据进行处理后再返回 类似于计算属性
// 类似于计算属性 对state中数据进行处理然后再返回getters: {Upper(state) {return state.public.toUpperCase()}},mutations属性
突变 同步操作 唯一修改state方式
// 突变 同步操作 修改state中数据的唯一一种方式mutations: {SET_TOKEN(state, payload) {// state是vuex默认提供的 payload载荷 提交突变传参 payload接收突变传递参数state.token = payload}},actions属性
动作 异步操作 一般用于获取后端数据
// 动作 异步操作actions: {// 登录获取token 提交突变 把token传给突变 突变--->设置给state中tokenlogin(sto, payload) {// sto类仓库对象 默认提供 commit提交突变 dispatch// 假设发送完成异步请求let token = 'dasdasdasfasdasdasdasdadaadssdasda';//token就是后端获取到的数据token// 将token提交给突变sto.commit('SET_TOKEN',token)console.log(sto, payload);}}modules属性
模块化 分模块进行维护状态
modules: {login,user}
辅助函数
组件内使用vuex中核心概念：state getters actions mutations
$store.state.模块名字(login).token
辅助函数 mapState('login',['token','msg']); {{token}}
辅助函数 mapGetters('login',['Upper'])
mapState mapGetters 声明在计算属性中
methods: {...mapActions(['login']),...mapMutations(['SET_TOKEN']),// 相当于login(){}}, 辅助函数 mapMutations('login',['SET_TOKEN'])
辅助函数 mapActions('login',['login'])
mapMutations mapActions 声明在methods中
异步动作 $store.dispatch('login/login')
computed:{// 引入辅助函数所对应的状态/数据 mapState('命名空间',['','',''])...mapState(['public','token']),...mapGetters(['Upper'])}
