Vue-什么是vuex

1.关于状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

大家可以思考一下，组件之间的传值有哪些？有父子通讯，兄弟组件通讯......但是传参对于多层嵌套就显得非常繁琐，代码维护也会非常麻烦。因此vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。

2.vuex的五个状态（后续补充）

vuex中一共有五个状态 State Getter Mutation Action Module

下面是一个调用vuex的实例

<template><div id="app"><input v-model="counts" /><input v-model="getternum" /><button @click="addnum1">mutation+1</button><button @click="actionnum6">action+6</button><img src="./assets/logo.png"><router-view/></div>
</template><script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
export default {data(){return{}},computed:{...mapState({counts:(state) => state.count}),...mapGetters({getternum:'doneTodos'})},methods:{...mapMutations({addnum:'addNum'}),...mapActions({actionnum:'actionNumAdd'}),addnum1(){this.addnum()},actionnum6(){this.actionnum()}}
}</script>

3.Vuex在项目中的配置和使用

1.首先安装vue项目和vuex

方法一：在创建Vue项目的时候，在选择配置项的这一步，选择 “Vuex”这个模块。

方法二：如果创建Vue项目的时候没有安装Vuex模块，可以直接— npm i vuex -s 下载

2.新建store文件

注意：如果你在创建Vue项目的时候，配置了Vuex这个模块，你的项目中就有store这个文件。，可以跳过这一步。

如果没有：

在src路径下创建一个store文件，里面创建个index

在main.js的入口文件引入并在new vue中初始化
注意：引用的时候不加{ }会报错

————————————————
版权声明：本文为CSDN博主「小张快跑。」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/io_123io_123/article/details/123723930

3.创建基本的vuex结构

在store/index.js中创建基本的vuex结构

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex)export const store = new Vuex.Store({state : {count:6},// 相当于Vuex中的计算属性getters:{doCount: (state, getters) => {return getters.doneTodos.length},//getters里的第一个参数是state，第二个是getters本身doneTodos:(state) =>{return state.count+2}            },mutations : {counts(state, v) {state.count = v;},addNum(state,v) {if(v){state.count += v}else{state.count ++}},reduceNum(state) {state.count --}},actions : {actionNumAdd(v) {// axios.get("/customer/user_info").then(res => {//     v.commit(addNum, res.data);// });//这里可以直接掉接口，并赋值，第一个参数是mutation里对应的名字，第二个参数是传的值v.commit('addNum', 6);},actionNumReduce(v) {// axios.get("/customer/user_info").then(res => {//     v.commit(addNum, res.data);// });//这里可以直接掉接口，并赋值，第一个参数是mutation里对应的名字，第二个参数是传的值v.commit('reduceNum', 6);}}})

4.调用vuex

下面的实例调用都是用的辅助函数，在刚创建好的App.vue实例基础上调用

<template><div id="app"><input v-model="counts" /><input v-model="getternum" /><button @click="addnum1">mutation+1</button><button @click="actionnum6">action+6</button><img src="./assets/logo.png"><router-view/></div>
</template><script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
export default {data(){return{}},computed:{...mapState({counts:(state) => state.count}),...mapGetters({getternum:'doneTodos'})},methods:{...mapMutations({addnum:'addNum'}),...mapActions({actionnum:'actionNumAdd'}),addnum1(){this.addnum()},actionnum6(){this.actionnum()}}
}</script>