vue的vuex

1.公司最近开发都是用vue框架和element ui来实现的，看了公司项目源码使用了vuex，但是我进去一看，没有管理数据状态，但是还是引入了vuex, 好吧,项目比较小，前人写的！肯定未来项目大的话会使用vuex,所以提前学习一下，分享下学习心得，如果不对，请指正！

a:首先还是创建vue项目之类的吧，首先创建好，然后由父组件和子组件做成的简单页面，给大家看一下！

父组件：father.vue  子组件children.vue

如果show这个参数值在很多很多组件中需要，那么传递的组件就要用props[]传递参数，而且子组件不能修改父组件内容，这样就会造成大量的工作，所以解决这个问题，使用vuex来就会很方便的

vuex 使用：

1.安装vuex 

npm install vuex --save

2.找到main.js

响应的父子组件肯定也要修改了

这个就可以取到state的值了

这只是个简单的例子了，在实际vue项目中也肯定不是这样写的，我截取了项目的vuex目录

接下来还是讲讲一下mutations,actions.getters在vuex中扮演的角色吧！

b:  按照上面的vuex截图，先新建几个文件和vuex目录了

首先去掉mian.js中的store之类的，然后在main.js中引入刚新建的vuex中的store.js文件，如下图

接下来store.js文件如下来管理状态

show的状态值可以通过父子组件的方法$store.state.show在很多其他组件中引用这个状态值，

c: mutations

state.show = true值如果要修改为false来执行某些操作，那么就要在很多组件中去写改变值的方法，例如 父组件中的

v-on:click="$store.state.show = true"

但是如果我们要进行一个操作 , 需要依赖很多很多个状态 , 那使用起来就会很麻烦了 !

所以我们可以把这个方法写在mutations中

例如这样写

// 应用初始状态
const state = {
show:false,
count:2,
}


// 定义所需的 mutations
const mutations = {
    changeShow(state){
state.show=!state.show
    },
    INCREMENT(state) {
        state.count++
    },
    DECREMENT(state) {
        state.count--
    }
}

mutations中定义了三个方法，这里面定义的方法是同步执行的（记住），官方不推荐异步方法写在里面

方法定义好了，要怎样调用呢？  在组件中使用  $store.commit('changeShow')，就可以使用mutations的 changeShow方法了！

like this

d. actions  既然mutations是执行同步，那么异步的就应该写在actions中了

  我们把mutations中的changeShow方法去掉，然后写在actions里面

在父组件中调用的时候就用 

$store.dispatch('changeShow') 

同样可以实现这个方法操作，

actions里面也可以调用mutations里面的方法：

组件里调用这个方法还是一样，用$store.dispatch('changeShow') 

mutations使用$store.commit()触发方法  同步操作

actions使用$store.dispatch()触发方法   异步操作

e: getters 是用来计算state然后生成新的数据状态

定义一个getters，里面写了个getShow方法，返回state

在父组件中调用使用

每次点击时都会改变state的值 

还有mapState、mapGetters、mapActions 不过我也不是很懂，只是获取状态的一种简单方式，等我自己了解熟练了再说吧！