vueX (sore) 的使用步骤

Posted web半晨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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. s t o r e . c o m m i t ( ′ f u n c t i o n ′ , v a l u e ) ; 6. 获 取 数 据 的 方 法 : t h i s . store.commit('function', value); 6. 获取数据的方法: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 对象中的获取数据的方法(函数)

以上是关于vueX (sore) 的使用步骤的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

10分钟了解Vuex的使用步骤和核心特性

Vuex的概念理解及实践运用步骤

Vuex的概念理解及实践运用步骤