vuex使用方法(详细实用)

vuex使用方法(详细实用)vuex用法

大家好,欢迎来到IT知识分享网。

vuex使用方法

前言

1、官方文档比较正式详细,但看完之后依然一脸懵逼,不知道具体该怎么使用。
2、本文内容是结合自己在项目开发中总结的比较好用的一种用法。
3、写这篇文章主要目的是为了自己找资料时方便,同时也分享一下自己的经验,方便他人使用。

一、什么是vuex?

这个没什么好说的,官网已经描述的很详细了,点击下方链接可直达。

vuex官方文档

二、vuex具体用法

1、安装

两种方法都可以

npm install vuex --save
yarn add vuex

在main.js中引入

import store from './store';

new Vue({ 
   
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { 
    App }
})

2、添加文件

项目完整目录如下
项目完整目录

3、每个文件具体配置

<1>、modules

modules里面添加js文件,命名随意,建议按照模块命名,每个模块仅存储该模块的状态。
示例:
假设里面创建了一个 form.js 和 user.js 两个文件
form.js

const state = { 
   
  count: 0 // 数量
};

const mutations = { 
   
  SET_COUNT: (state, data) => { 
   
    state.count++;
  }
};
const actions = { 
   };

export default { 
   
  state,
  mutations,
  actions
};

user.js

const state = { 
   
  name: 0, // 姓名
  age: 0, // 年龄
};

const mutations = { 
   
  SET_NAME: (state, data) => { 
   
    state.name = data;
  },
  SET_AGE:(state, data) => { 
   
  	state.age = data;
};
const actions = { 
   };

export default { 
   
  state,
  mutations,
  actions
};
<2>、getters.js

所有使用的状态在这里都要列出来

const getters = { 
   
  count: state => state.form.count,
  name: state => state.user.name,
  age: state => state.user.age
}
export default getters
<3>、index.js

modules中创建的文件在index.js中引入一下

import Vue from 'vue'
import Vuex from 'vuex'
import form from './modules/form'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({ 
   
  modules: { 
   
    form,
    user
  },
  getters
})

export default store

4、使用

使用方法很简单,只需在具体的.vue文件中引入相应状态即可

import { 
    mapGetters } from "vuex";

computed: { 
   
  ...mapGetters(["count"]),
},

如需改变状态也很简单,不需要额外引入,直接调用方法即可

this.$store.commit("SET_COUNT");
this.$store.commit("SET_NAME", '张三');
this.$store.commit("SET_AGE", 20);

后记

至于具体状态如何应用就不做赘述了,跟普通数据一样;
如有错漏之处还望看到的同学可以在评论中指出,我会不定时进行更新;
至此,全文结束。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/12316.html

(0)
上一篇 2024-03-15 12:33
下一篇 2024-03-16 16:15

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信