vuex基本使用心得（2）

 

这一篇 做个‘点击文字是否隐藏’小demo

我看到很多例子都是讲vuex的加减操作，所以我要换点新鲜的。。。。

这个demo 纯属热身动作。。。。

                                 本屌丝不知道怎么搞 gif效果。。。。就不上效果。。。简单的截图

 

首先打开 store.js  这个文件

 

 

 

把代码贴出来：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)



const store = new Vuex.Store({
    state: {
        is_show: true //默认显示，点击的时候再隐藏
    },
    mutations: {
        show_1(state) {
           state.is_show =!state.is_show;
        }
    }
})

export default store

第二步：

因为我这边用的一个组件来做效果的，所以引入了这个 vuex  就是那个hello  看图

 

 

 

 

第三步：所以我现在直接操作 vuex这个组件的内容。。。。

   看下图：注意画圈的地方

 

 

 

这里就要开始讲解下了，不能再截图了，不然会被喷的。。。

 

1：里面的this.$store.state.is_show; 

获取状态的值，store.js文件里面的  必须用 this才行喔

 

2：click事件：this.$store.commit('show_1'); 

 也是这个store.js里面的，用来触发mutations 这个对应的函数的。就是 show_1 这个函数了。触发后就会取反赋值

mutations 是个函数集，里面放的就一些要触发的自定义函数，至少我是这么理解的，那个state是一些状态属性值。。

Vuex其实就是个仓库，公共存取，很方便。。。

 

3：最后我用了计算属性，非常方便，再配合 v-if来显示隐藏computed:{
  qq(){
    return this.$store.state.is_show;
  }

 

 

好了，是不是很简单呢。。。。Very good，只是个非常简单的热身，不会让你们觉的有多复杂，让你们提起兴趣。

 

下篇我就可能会用到：

· State

· Getter

· Mutation

· Action  还有辅助函数这些了。。。。尽可能的复杂点。。

 

                                                以上是本人：bob，亲身经历实践，如有出错，欢迎指正，谢谢，QQ:2410024100