vuex学习二

来源:互联网 发布:为什么网络电视不清晰 编辑:程序博客网 时间:2024/06/17 12:05

四:每一个 Vuex 应用的核心就是 store(仓库)。”store” 基本上就是一个容器,它包含着你的应用中大部分的状态(state)。页面一刷新,所有state清零(在那种查看详情的页面最容易出现这种问题;列表页面跟详情页面属于2个不同的VUE组件;通过state传递详情ID;页面刷新后ID清空冷;处理办法:H5存储);Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store中的状态发生变化,那么相应的组件也会相应地得到高效更新。

    2.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit)mutations。 这样使得我们可以方便地跟踪每一个状态的变化

五:演练
1:index.js

import Vuex from 'vuex'Vue.use(Vuex)const store=new Vuex.Store({    state:{        use_name:''    },    mutations:{        showUserName(state){            alert(state.user_name)        }    }})

现在可以通过store.state来获取状态对象,以及通过store.commit方法触发状态变更;

store.commit('showUserName')console.log(store.state.use_name)

再次强调,我们通过提交mutation的方式,而非直接改变store.state.use_name