关于Vuex,官网给出的解释是
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
纳尼!什么叫状态应用管理模式,不着急,听我娓娓道来
我个人就简单地理解为:vue模板当中不是分为块吗。template、script、style,view这块的话应该指的就是template相关的代码,展示整个视图。而state就是script中的data部分,与数据打交道,actions就是script中的methods部分,通常是方法(个人理解),官方的解释更为权威。
话说vuex的核心就是store(仓库),它包含着应用中的大部分状态。当组件从store中读取状态时,若组件中的状态发生变化的话,那么组件的状态也会得到更新;我们不能直接修改store中的状态,如果要修改的话,是通过组件中的提交 (commit) mutation(变化)。来看个例子
首先在你vue项目中安装vuex cnpm install vuex --save
然后在你的项目中创建store文件,创建一个store.js,如图所示
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
Vuex总共有几个核心 vuex官方文档 我相信很多人跟我一样,看官方文档都是一脸懵的
这种做法呢只要根组件里面引入子组件并且在子组件上bind数据
我们使用vuex不这么做(记得使用vuex之前在你的项目中安装vuex,cnpm install vuex --save,在src文件里面创建store文件夹并且创建store.js,在store.js里面引入vue和vuex,使用并且实例化vuex,当然也要记得在入口文件main.js里面引入vuex,这是基本的准备工作)
state
ok,那么应该怎么在productlistOne里面使用呢
还记得我们在根组件的写过那句v-bind吗,这个可以直接删掉
这就是state,我个人的理解就是一个集中管理数据的仓库
getters
现在我们要对里面的数据进行操作,比如说对加组件1和组件2里面的数据都要进行打折。我们可以使用getters
在组件1和组件2里面使用
这是都是得到store里面的数据,那么我们要想改变里面的数据,应该怎么做。其实开篇有提到过,就是提交mutation。每个mutation都有一个事件类型(type)和一个回调函数(handler)
mutation
在学习mutation的时候,我将自己开发工具换成了Visual Studio Code,感觉这个比较好用
那么如何写producListOne中使用呢
你不能直接调用一个 mutation handler。要唤醒一个 mutation handler,你需要以相应的 type 调用store.commit方法:
值得一提的是,我在producListTwo里面没有定义reduceprice,但是里面的内容也同样得到改变,想必这就vuex的好处,使用同一个库
actions
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用context.commit提交一个 mutation
Actions 支持同样的载荷方式和对象方式进行分发
...mapGetters和...mapActios是es6的语法,自己的项目中npm -preset-stage-2 --save