vuex的简单使用(state mutations,actions,getters)
Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。它还与Vue的官方devtools扩展集成,以提供零配置时间旅行调试和状态快照导出/导入等高级功能。就是个大仓库库,里面存储项目的公共代码。view --> (message) action --> (commit) mutions -
Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。它还与Vue的官方devtools扩展集成,以提供零配置时间旅行调试和状态快照导出/导入等高级功能。
就是个大仓库库,里面存储项目的公共代码。
view --> (message) action --> (commit) mutions --> (mutate) state --> view
上代码:
安装:npm install vuex --save
创建和引入:
在src下创建store文件夹,创建index.js(创建地点看心情而定^_^),
然后在main.js里引入,方法和路由文件的引入一样
注:一定要将store注入到组件中
使用:
一、state:在store里 创建state对象,定义数据count:10
页面中调用:this.$store.state.count
html中使用的方法就不截图了 即:{{ getCount }}
二、mutations:
在store里创建mutations对象,一定不要忘记加 s 哦!!!在mutations里定义两个方法 increment和reduce,在这里以简单的加加和减减为例。
mutations里不能做异步操作 ,需要异步请求数据时候 用actions
页面中调用:this.$store.commit("store中定义的方法名")
html中使用:即调用add和sub方法即可
三、action:action提交的mutations 而不是直接提交状态。在store里定义actions 对象 里面定义方法 increment和reduce
页面中调用:this.$store.dispatch("store中定义的方法名")
四、getters: 比如 上面的例子 若要count=10 减到0停止 ,不能减到负数,那么 此时 getters上场
页面中调用:this.$store.getters.定义的方法名
以上是本人的简单理解,欢迎大家多多指教,互相学习!
更多推荐
所有评论(0)