web前端之vue中vueX的使用步骤、store

---

前期准备工作

1. 在 vue中安装vueX
2. 在App.vue或main.js同级上新建一个store文件夹
3. 在store文件夹中新建一个 index.js 文件 和 一个modules文件夹，modules文件夹属于非必要性
4. 在store文件中的 index.js 文件中引入需要的模块（这里的意思是引入存放数据的 .js 文件，这个文件一般放在modules文件夹中）
5. 设置数据的方法：this.$store.commit(‘function’, value);
6. 获取数据的方法：this.$store.getters. function;

---

分步解析

第一步：安装VueX

在Vue之后引入vuex会进行自动安装

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

npm安装

npm install vuex --save

yarn安装

yarn add vuex

---

第二步：编写store文件夹下的index.js文件

import Vue from 'vue';
import Vuex from 'vuex';

// global.js 文件 和 index.js 文件  同级
import global from './global';
import setGetId from './modules/SetGetId'

Vue.use(Vuex);

const store = new Vuex.Store({
  global,
  modules: {
    setGetId
  }
});
export default store;

---

第三步：编写store文件夹下的modules文件夹下的setGetId文件夹下的index.js文件

export default {
    state: {
        id: ''
    },
    getters: {
        getId: state => state.id
    },
    mutations: {
        //set方法
        setId(state, id) {
            state.id = id
        }
    }
}

---

第四步：使用

在需要存数据的地方使用这个api：this.$store.commit('setId', value);。
参数介绍
1、setId参数就是mutations对象中的设置数据的方法(函数)
2、value参数就是要设置的值

---

在需要获取的地方使用这个api：this.$store.getters. getId;。
参数介绍
1、getId参数是getters对象中的获取数据的方法(函数)