vuex使用方法超详细讲解(实用)
作者：温其如玉_zxh
这篇文章主要给大家介绍了关于vuex使用方法的相关资料,主要内容包括Vuex的安装和配置,以及如何在.vue文件中引入和使用Vuex状态,作者还分享了一种在模块中存储状态的建议方法,并提供了具体的代码示例,需要的朋友可以参考下
前言
1、官方文档比较正式详细，但看完之后依然一脸懵逼，不知道具体该怎么使用。
2、本文内容是结合自己在项目开发中总结的比较好用的一种用法。
3、写这篇文章主要目的是为了自己找资料时方便，同时也分享一下自己的经验，方便他人使用。
一、什么是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);
后记
至于具体状态如何应用就不做赘述了，跟普通数据一样；
到此这篇关于vuex使用方法的文章就介绍到这了,更多相关vuex使用方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！