vuex的简单使用(state mutations,actions,getters)

    Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。它还与Vue的官方devtools扩展集成,以提供零配置时间旅行调试和状态快照导出/导入等高级功能。

就是个大仓库库,里面存储项目的公共代码。

view --> (message) action --> (commit) mutions --> (mutate) state --> view

上代码:

安装:npm install vuex --save

创建和引入:

在src下创建store文件夹,创建index.js(创建地点看心情而定^_^),

vuex的简单使用(state mutations,actions,getters)_第1张图片

然后在main.js里引入,方法和路由文件的引入一样

 注:一定要将store注入到组件中

vuex的简单使用(state mutations,actions,getters)_第2张图片

使用:

一、state:在store里 创建state对象,定义数据count:10

页面中调用:this.$store.state.count

html中使用的方法就不截图了  即:{{ getCount }}

二、mutations:

       在store里创建mutations对象,一定不要忘记加 s 哦!!!在mutations里定义两个方法 increment和reduce,在这里以简单的加加和减减为例。

       mutations里不能做异步操作 ,需要异步请求数据时候 用actions

vuex的简单使用(state mutations,actions,getters)_第3张图片

页面中调用:this.$store.commit("store中定义的方法名")

vuex的简单使用(state mutations,actions,getters)_第4张图片

html中使用:即调用add和sub方法即可

三、action:action提交的mutations 而不是直接提交状态。在store里定义actions 对象 里面定义方法 increment和reduce

vuex的简单使用(state mutations,actions,getters)_第5张图片

页面中调用:this.$store.dispatch("store中定义的方法名")

vuex的简单使用(state mutations,actions,getters)_第6张图片

四、getters: 比如 上面的例子  若要count=10 减到0停止 ,不能减到负数,那么 此时 getters上场

vuex的简单使用(state mutations,actions,getters)_第7张图片

页面中调用:this.$store.getters.定义的方法名

vuex的简单使用(state mutations,actions,getters)_第8张图片

以上是本人的简单理解,欢迎大家多多指教,互相学习!

 

你可能感兴趣的:(vuex的简单使用(state mutations,actions,getters))