vuex使用方法（详细实用）

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);

后记

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