刚入手vue的前端小白 总结下 vuex的使用(请大神多指点)

日常一样 上面先来一段 火星文 反正看的人不多 但这东西吧 读者可以选择不看 但你不能没有
vuex 是什么呢？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
上面写完 我自己都不知道是什么意思，还是老老实实 做一个代码的搬运工吧

1.日常脚手架中使用 vuex 像我这种菜鸟级别 应该就是下面的这种情况
// 先整一个文件 定义好 vuex 的一些信息

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  count:0
  },
  getters:{
	count(state){
		return state.count;
	}  
  },
  mutations: {
	  add(state,value){
		  state.count=state.count+value;
	  }
  },
  actions: {
	  setCount({state,commit},value){
		  commit('add',value);
	  }
  },
  modules: {
  }
})

2.但是 菜鸟觉得 数据少还可以 多的话 都放到一个文件夹好像 不太好 菜鸟都觉得不好 各位大佬肯定 早都优化好了
在store 文件夹下 创建 四个文件夹 看来好看 是吧 其实我也不知道怎么这样写 只是觉得好管理吧 毕竟刚入手

然后就是把 index.js文件在动一动 里面的东西都拿出来了
// 为啥 菜鸟博主 把 module 去掉了呢 因为本博主认为哈 module拿东西 一般是大项目采用 像我这种菜鸟 一般碰不到什么大项目 这辈子感觉无缘了 毕竟这辈子都进不了大厂 就打算在小公司混混日子就行了

import Vue from 'vue'
import Vuex from 'vuex'
import state from "./state"
import mutations from './mutations'
import actions from "./actions"
import getters from './getters'
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

state.js

const state={
	count:0
}
export default state;

getters.js

const getters={
	count(state){
		return state.count;
	}
}
export default getters;

mutations.js

const mutations={
	add(state,value){
		state.count=state.count+value;
	}
}

export default mutations;

actions.js

const actions={
	setCount({state,commit},value){
		commit('add',value);
	}
}

export default actions;

然后就是 很重要的部分了 使用 在组件中使用

<template>
	<div id="app">
		{{count}}
		<button @click="add">增加+2</button>
	</div>
</template>
<script>
  import axios from "axios";
    export default {
      data() {
        return {
          count:this.$store.state.count
        };
      },
      methods: {
		add(){
			setTimeout(()=>{
				this.$store.dispatch('setCount',2);
			},1000)
		}
      }
    }
</script>

问题是 当我们点击的时候好像并不会+2 这个是因为 我们 第一次赋值给data中的数据之后 他就不会再 改变了 这个时候我们可以把它放到我们的计算属性中

computed:{
	count(){
		return this.$store.state.count;
	}  
  },

然后就可以 监听 了 一旦 我们的vuex中的数据发生变化 就可以 触发 页面上的改变了
但这个时候 又来了一个新的问题 一旦 我们vuex中的数据 越来越多怎么办 一个一个绑在 计算属性中吗 那样 好像也不是太好

好了再一次优化 使用 vuex中的辅助函数
mapState 算是一种对vuex中的state的一种映射吧

 import {mapState,mapMutations,mapActions} from "vuex"

computed:{
	 ...mapState({
		 count:'count'
	 })
 },
 不想写对象的形式 也可以写成数组
 computed:{
	 ...mapState(['count'])  // 同时 也不影响你再增加其他的计算属性
 },

当然 除了mapState其他的我们也可以使用
mapActions 相当于把vuex中的actions对象中方法 注册到 当前组件中

 methods: {
		...mapActions(['setCount']),
		add(){
			setTimeout(()=>{
				this.setCount(2);
			},1000)
		}
    }
当然 你也可以给方法起别名
methods: {
	...mapActions({
		myCount:'setCount'   // 起别名 得是对象形式的哦
	}),
	add(){
		setTimeout(()=>{
			this.myCount(2);
		},1000)
	}
     }

mapMutations 用法差不多 就不一一赘述了哦

好了 很佩服能把vuex 玩的 很转的大神 我在里面穿来穿去 就晕了 不知道 数据去哪了
这个时候怎么办了 小白推荐大家安装一个 vue-detools 调试工具 时刻跟踪 vuex的状态值 不让你那么 晕乎
之前有安装教程 欢迎查看 小白 那篇博客
https://blog.csdn.net/yunchong_zhao/article/details/104311448