Vue 中 store 基本用法

    最近在使用vue的过程中，遇到一个需求，就是需要在不同路由中使用同一个会改编的参数，也就是需要一个全局参数，一看见全局，不就是使用window呗。可是既然已经使用vue了，当然要研究一下vue里面怎么实现的。于是简单了解了一下store。

    首先，我的需求比较简单，只是全局变量，但是在我查找各种资料的时候发现看不懂。。。这就尴尬了，而且大部分的文章都是讲述store的状态管理，理解store，但是找了一上午，还真的没有看到该怎么使用，怎么声明一个最简单的store，怎么存入全局变量，怎么获取全局变量。然后自己看了一下官方的store文档资料，决定自己先写一个最简单的使用方法。

    首先，我们需要声明一个store的index.js文件：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    //这里放全局参数

  },

  mutations: {

    //这里是set方法

  },

 getters: {        //这里是get方法   },

  actions: {

    //这个部分我暂时用不上

  },

  modules: {

//这里是我自己理解的是为了给全局变量分组，所以需要写提前声明其他store文件，然后引入这里

  }

})

    这就是一个最简单的store文件格式了。

    然后根据我们的变量分组，我新建了一个module文件夹

    我在里面新建了一个demo文件：

export default {

    state: {

        //属性

        demoValue:{}

    },

    getters: {

        getDemoValue: state => state.demoValue

    },

    mutations: {

        //set方法

        setDemoValue(state,demoValue){

            state.demoValue = demoValue

        }

    }

}

    这个文件就不需要太多东西了，创建之后，在index中通过import引入，然后在module中申明就好了

    现在前置准备做好了，怎么使用呢？这个才是重点。

    经过我测试，最开始的时候我也是胡乱在弄，直接在需要调用的地方写：

this.$store.demo.setDemoValue(value);

this.$store.demo. getDemoValue ;

    当然是给我报错，提示undefined。于是我断点去看我的$store里面到底有什么东西。这一看不要紧呀。发现里面根本没有我的demo属性对象。。。但是在$store里面直接有个getter，打开看，居然就是我demo里面的getDemoValue 方法执行后的返回值，也就是说getter里面的东西是我申明的getter里面方法的返回值，现在如何取值解决了：

this.$store.getters. getDemoValue

    这样能直接获取我的全局变量demoValue的值，那么如何修改，或者说怎么存入呢？我在$store里面也没有看见mutations这个属性呀。但是有个commit，是一个方法，这不是提交吗？试一下。

    这个方法有两个参数，于是有了以下：

this.$store.commit('setDemoValue', value);    

    别说。这还真是对的。经过这一番测试，发现。在全局变量的存取过程中，根本就跟我声明的demo.js文件的名字，还有我在index.js中module里面引入的demo的命名没有半点关系。。

    现在总结一下使用方法：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    //这里放全局参数

    demoValue:{}

  },

  mutations: {

    //这里是set方法

    setDemoValue(state,demoValue){

            state.demoValue = demoValue

        }

  },

    getters: {

    //get方法

        getDemoValue: state => state.demoValue

    },

  actions: {

    //这个部分我暂时用不上

  },

  modules: {

//这里是我自己理解的是为了给全局变量分组，所以需要写提前声明其他store文件，然后引入这里

  }

})

    使用的时候get方法和set方法分别是：

this.$store.commit('setDemoValue', value);    

this.$store.getters. getDemoValue

    当然。我只是把这个当成一个全局变量在使用，没有使用很多同步异步的功能，还有什么状态管理都没有管，先用上了再说吧，其他大佬肯定不会像我这么暴力的使用。。。