vueX、sore、的使用步骤

1、前期准备工作

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;

2、分步解析 第一步：安装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); 参数介绍

• setId : 这个参数就是mutations对象中的设置数据的方法（函数）
• value : 这个参数就是要设置的值

在需要获取的地方使用这个api : this.$store.getters. getId; 参数介绍

• getId : 这个参数是getters对象中的获取数据的方法（函数）