Vue2 中vuex和store基本用法——取值之this.$store.getters.getValue & 存值之this.$store.commit(‘setValue‘, paramVal)

Vue2 中vuex和store基本用法——取值之this.KaTeX parse error: Expected 'EOF', got '&' at position 24: …tters.getValue &̲ 存值之this.store.commit(‘setValue’, paramVal)

1、应用场景

在不同路由中使用同一个会改编的参数，也就是需要一个全局参数。即声明一个最简单的store后，怎么存入全局变量，怎么获取全局变量。

2、操作步骤

2.1、声明一个store的index.js文件

src/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文件格式了。

然后根据我们的变量分组，

2.2、新建一个module文件夹

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

src/store/module/demo.js

export default {
    state: {
       //属性
       demoValue:{}
    },
    getters: {
       getDemoValue: state => state.demoValue
    },
    mutations: {
       //set方法
       setDemoValue(state,demoValue){
          state.demoValue = demoValue
       }
    }
}

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

2.3、取值

直接在页面需要调用的地方写：

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

此时，报错，提示undefined。$store里面没有demo属性对象

但是在$store里面直接有个getter，打开看，就是demo里面的getDemoValue 方法执行后的返回值，也就是说getter里面的东西是申明的getter里面方法的返回值。

现在如何取值解决了：

this.$store.getters.getDemoValue

这样能直接获取我的全局变量demoValue的值

2.4、修改值

如何修改，或者说怎么存入呢？在$store里面也没有看见mutations这个属性呀。

但是有个commit，是一个方法，这不是提交吗？试一下。

这个方法有两个参数：

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

在全局变量的存取过程中，跟声明的demo.js文件的名字，还有在index.js中module里面引入的demo的命名没有关系。

3、使用方法总结

3.1、配置文件

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

当然。目前只是把这个当成一个全局变量在使用，不需要进行父子传值。没有使用很多同步异步的功能，还有什么状态管理都没有管。