Vuex复习笔记

Vuex是一个专为Vue.js应用程序开发的状态管理模式(通俗来说就是把需要多个组件共享的变量全部储存在一个对象里面,然后将这个对象放在顶层的Vue实例中,让其他组件也可以使用)

VueX最大的便利就是响应式(其实是vue的双向绑定),提供这样一个在多个组件间共享状态的插件

什么状态时需要我们在多个组件间共享?

遇到多个状态,在多个界面间的共享问题,这些状态信息都可以放在同一的地方对他进行保存和管理

单界面的状态管理

多界面的状态管理

1. 在src内创建store(仓库)
2. 在store内创建index.js
3. 在index.js内安装插件->创建对象->导出store
4. mian.js上挂载
5. 在使用的vue组件内 $store.state.xxx

//在main.js内加入
import store from './store'

Vue.prototype.$store = store

new Vue({
    el:'#app',
    store
    render:h => h(App)
})

状态管理核心

• State 定义我们所需要管理的数据、对象、字符串等等                       
• Getters 类似于计算属性,一般用于需要处理数据
• Mutation 更改state状态的唯一方法 需要调用方法 this.$store.commit('方法',对象)通常情况下,Vuex要求我们在Mutation中的方法必须是同步方法(就是setTimeout不建议使用)
• Action 在action提交的是mutation,而不知直接变更状态,可以包含任意异步操作,如果需要用action,则需执行store.dispath
• Module 在state很复杂臃肿的时候, Vuex允许我们将store分割成模块