Vue（八）Vuex在项目中的配置和使用

1.首先安装vue项目和vuex

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

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

2.新建store文件

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

如果没有：

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

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

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实例基础上调用

调用	方法	辅助函数
state	this.$store.state.xxx	mapState
getters	this.$store.getters.xxx	mapGetters
mutations	this.$store.commit(xxx)	mapMutations
actions	this.$store.dispatch(xxx)	mapActions

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