Vue躬行记(9)——Vuex
Vuex是一个专为Vue.js设计的状态管理库,适用于多组件共享状态的场景。Vuex能集中式的存储和维护所有组件的状态,并提供相关规则保证状态的独立性、正确性和可预测性,这不仅让调试变得可追踪,还让代码变得更结构化且易维护。本文所使用的Vuex,其版本是3.1.1。 一、基本用法 首先需要引入Vue和Vuex两个库,如果像下面这样在Vue之后引入Vuex,那么Vuex会自动调用Vue.use()方法注册其自身;但如果以模块的方式引用,那么就得显式地调用Vue.use()。注意,因为Vuex依赖Promise,所以对于那些不支持Promise的浏览器,要使用Vuex的话,得引入相关的polyfill库,例如es6-promise。 <script src="js/vue.js"></script> <script src="js/vuex.js"></script> 然后创建Vuex应用的核心:Store(仓库)。它是一个容器,保存着大量的响应式状态(State),并且这些状态不能直接修改,需要显式地将修改请求提交到Mutation(变更)中才能实现更新,因为这样便于追踪每个状态的变化。在下面的示例中,初始化了一个digit状态,并在mutations选项中添加了两个可将其修改的方法。 const store = new Vuex.Store({ state: {