@H_5020@Vuex 是什么?
@H502_0@Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
@H_502_0@上次我用了一个加减的例子为大家讲解vuex的基本的使用方式,和在什么样的情况下使用。上次还是在一个组件内把这个例子简单的展示了下,这次我把vuex抽离出来一个单独的文件,统一管理整个项目的状态。
@H_5020@上次也说了如果你的项目够大,那用vuex来管理整个项目的状态,那是再好不过的,如果是小项目的话就不推荐大家使用。好了废话不多说上码:
@H5020@当你把项目的都准备好后,都安装好了vue-cli,webpack,vuex,router等
@H502_0@第一步新建一个叫:store.js的文件内容如下:
注册vuex
export default new Vuex.Store({ // 暴露与new vuex
state: { // 相当于vue里data 存放整个项目的各个状态
number: 0
},
mutations: { //相当于vue里的methods放方法的,定义一些可以用来调用和修改state里的状态值
addFun (state,num) {
state.number = num
}
}
})
@H_502_0@这个状态管理的文件都建好了,接下来就是怎么去调用了
{{numbertxt}}
@H_502_0@好了整个稍微复杂点vuex独立抽离的例子就到这里了,有不懂的朋友或喜欢vue的可以加我微信(nihaomeili87)我们一起进步!
@H_502_0@