Vuex状态管理级辅助函数的使用,只需要你花20分钟认真了解一遍，在新的小白以后都很清晰了

先说为啥用它，举个例子 ，这里对你了解Vuex很重要，

在我们平时的项目中，比如好几个页面都用到同一个数据，并且这个数据是在一个页面改变，其他页面也需要变化，此时，我们使用vuex
就很方便了，
直接上代码，
相信来看vuex的同学，搭建一个vue项目那不用说了吧，
先看目录结构

页面展示如下，下面会给出每个页面的代码，加上解释
HelloWorld组件不需要，自己删除即可，初始化项目后，如果新手，对着目录建立组件，代码直接粘贴进去，运行起来，对着每个方法点击，理一遍，你就会很清晰了 ，

现在的需求是 头部组件和脚步组件都使用一个一个数字，我们在身体组件中点击减少，头部脚组件都要变化 点击赋值 actions按钮都要变化，这样这个值就可以在整个项目所有页面都可以使用，

Home.vue
引入组件，大家都懂，没有啥好说的

<template>
  <div class="home">
    <HelloWorld msg="状态管理辅以及辅助函数"/>
    <Header />
    <Count />
    <Footer />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Count from '@/components/Count.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld,
    Header,
    Count,
    Footer,
    
  }
}
</script>

再来看store下面的index.js
我们头部脚部用的数据就是count

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

Vue.use(Vuex)


const store = new Vuex.Store({
  state: {
    count: 0,
    name:"this store name"
  },
  mutations: {
    //赋值
    changenum(state,val) {
      state.count = val;
    },
    //每次减1
    asignnum(state,val){
      state.count--;
    },
   //
    actionsFn(state,val){
     
        state.count++;
    }
  },
  actions: {
    increment (context,payload) {
      console.log(payload)
      //在调用 mutations中的 actionsFn
      context.commit('actionsFn',payload)
    }
    
  },
  modules: {

  }
})

export default store

再来看内容组件师是怎么操作 的
Count.vue

<template>
  <div class="Count">
      <h3>我是身体组件</h3>
    <button class="btn" @click="add1">赋值</button>
    <button class="btn" @click="asignnum">减少</button>
     <button class="btn" @click="chanhenum">actions</button>
  </div>
</template>
<script>
 import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Count',
  props: {
   
  },
  data () {
      return {
          
      }
  },
  methods: {
       //方法二    
          //点击赋值按钮的时候  需要传参 ， this.changenum 要和下面  mapMutations中的changenum对应
            add1(){
                 this.changenum(20);
            },
           
          
           //调用 store中的increment 方法
           //这个师通过操作 actions 再来改变  mutations 中的方法  actionsFn
           chanhenum(){
              this.$store.dispatch('increment',1000);
           }, 
			//这样是使用辅助函数的方式
			//下面就是store中我们需要操作的方法，注意名字对应上
         ...mapMutations([
                'changenum',
                'asignnum'
            ])
            
		//方法一    
		//这是我们传统的写法 方法少的时候这样写师可以的 当我们点击 赋值按钮的时候，调用 store中  mutations中的
		//changenum的这个方法，把传递过来的20赋值给 store中的 count
        // add1(){
        // //点击这个方法 改变store中的数据，这个数据头部脚步公用
        //     this.$store.commit('changenum', 20)
        // },
        
        // asignnum(){
        //      this.$store.commit('asignnum', 520)
        // }
  },
  created () {
      
  },
  mounted () {
     
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
.Count{
    width: 100%;
    height: 200px;
    background: salmon;
}
.btn{
    background: skyblue;
    border: 0;
    margin-left: 10px;
}
</style>

再来看脚步组件Footer.vue

<template>
  <div class="hello">
     我是脚步组件
     {{sum}}
  </div>
</template>

<script>
export default {
  name: 'Footer',
  props: {
    msg: String
  },
  //计算属性 来获取store中count  这是传统的写法 如果我们需要使用的数据很多 ，那不能写N个这样的方法吧
  //下面**header.vue**中就是使用辅助函数的方式来获取的
    computed:{
        sum:function(){
            return this.$store.state.count;
        },
      
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello{
    width: 100%;
    height: 50px;
    background: #ccc;
}
</style>

Header.vue

<template>
  <div class="hello">
       <p>我是头部组件</p><br/>
       {{count}} <br/>
       <br/>
       {{name}}
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: 'Header',
  props: {
    msg: String
  },
   data () {
      return {
         
      }
  },
//这样不是store中有多少数据，我们都只需往下面的mapState中写入即可，就已name 为例 
//你可以仔细查看store下面的index.js中state下数据
    computed: {
        ...mapState(["count","name"])
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello{
    width: 100%;
    background: #ee5600;
}
</style>

看懂这个已经能满足平时的需求了，至于什么vuex进阶，模块啥的，说实话，一般的小项目真心用不上，我不喜欢杀鸡用宰牛刀。