详解Vuex

一、什么是vuex

vuex就是用来专门为vue管理状态的。也就是说，我们需要跟其他页面或者组件共享的data，可以使用vuex进行统一的集中式管理。

 

二、vuex的组成

在vuex中，有默认的五种基本的对象

• state 存储状态（变量）

• getters：对数据获取之前的再次编译，可以理解为state的计算属性，我们在组件中使用$store.getters.fun()

• mutation：修改状态，并且使同步的。在中间中使用$store.commit()来提交修改

• actions：异步操作，在组件中使用$store.dispath()

• modules：store的子模块，为了方便胡葬台管理二使用的

 

 

 

三、使用vuex

如果在使用vue init其初始化一个项目的时候，选择了vuex作为状态管理的话，那么初始化的项目中就已经配置好了vuex了。但是为了熟悉一下vuex，我们还是先来重新配置一下

 

1、引入

npm install vuex --save

//

vue add vuex

2、在store目录下的store.js或者index.js文件中下面这样写

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state = {

    count: 0

}





export default new Vuex.Store({

    state

})

然后在main.js中引入store

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './vuex/store' // 引入store

new Vue({

    el: '#app',

    router,

    store,

    components: { App },

    template: '<App/>'

})

这样的话，就可以在全局去使用vuex里面定义的state变量了，比如

$store.state.count

 

3、操作值

使用mutations和actions去操作vuex中的state。

首先是mutations，在store下面的index.js中mutaions中定义那些你需要去修改的状态的方法，比如

const mutaions = {

    AddCount(state,n=0){

        return (state.count+=n)

    }

    ReduceCount(state,n=0){

        return (state.count -=n)

    }

}

export default new Vuex.Store({

    state,

    mutations

})

那么，我们怎么样去调用这两个mutation呢？

<template>

  <div class="hello">

    <h3>{{$store.state.count}}</h3>

    <div>

      <button @click="handleAddClick(10)">增加</button>

      <button @click="handleReduceClick(10)">减少</button>

    </div>

  </div>

</template>

<scritt>

methods: {

    handleAddClick(n){

      this.$store.commit('AddCount',n);

    },

    handleReduceClick(n){

      this.$store.commit('ReduceCount',n);

    }

  }

</script>

比如我们现在在home.vue中，现在想要去修改state中count的值，那么就可以在相应的方法中这样调用mutation

而actions与mutations不同的是，它是异步操作，所以我们可以在这里去请求那些异步的请求，比如post，get这些，然后根据返回的结果去mutation改变我们的状态值。

 或者直接提交mutation

const actions = {

    actionsAddCount(context, n = 0) {

        console.log(context)

        return context.commit('AddCount', n)

    },

    actionsReduceCount({ commit }, n = 0) {

        return commit('ReduceCount', n)

    }

}

export default new Vuex.Store({

    state,

    mutations,

    actions

})

在别的页面或者组件当中，可以像下面这样去提交action

<div>异步操作</div>

  <div>

    <button @click="handleActionsAdd(10)">异步增加</button>

    <button @click="handleActionsReduce(10)">异步减少</button>

  </div>



handleActionsAdd(n){

      this.$store.dispatch('actionsAddCount',n)

    },

    handleActionsReduce(n){

      this.$store.dispatch('actionsReduceCount',n)

    }

4、获取值

在vuex中，使用getter获取到state中的值，为什么要另外使用getter去获取呢？我想你可能会有这样的疑惑，因为state中的值是不能随便改变的，它是全局变量，但是有的时候我们又有另外一个全局变量，这个变量是在state中的变量的基础上做相应的运算所得到的，那么此时我们就可以使用getter去获取这样的值了。

const getters = {

    getterCount(state, n = 0) {

        return (state.count *= n)

    }

}

export default new Vuex.Store({

    state,

    mutations,

    actions,

    getters

})

那么在其他组件中，这样使用

<h4>{{count}}</h4>



const getters = {

    getterCount(state) {

        return (state.count += 10)

    }

}

5、vuex官方给了一个更加简单的方式去使用Vuex，那就是 {mapState, mapMutations, mapActions, mapGetters}

<script>

import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'

export default {

  name: 'HelloWorld',

  data () {

    return {

      msg: 'hello world'

    }

  },

  methods: {

    ...mapMutations({

      handleAddClick: 'AddCount',

      handleReduceClick: 'ReduceCount'

    }),

    ...mapActions({

      handleActionsAdd: 'actionsAddCount',

      handleActionsReduce: 'actionsReduceCount'

    })

    // handleAddClick(n){

    //   this.$store.commit('AddCount',n);

    // },

    // handleReduceClick(n){

    //   this.$store.commit('ReduceCount',n);

    // },

    // handleActionsAdd(n){

    //   this.$store.dispatch('actionsAddCount',n)

    // },

    // handleActionsReduce(n){

    //   this.$store.dispatch('actionsReduceCount',n)

    // }

  },

  computed: {

    count(){

      return this.$store.getters.getterCount

    }

  }

}

</script>