vuex5大核心和4大金刚(辅助函数)用法

vuex是状态管理工具，任何组件都可以使用vuex里的公共数据。

vuex5大核心及其用法：

state：vuex里用于存放数据和变量

mutations：唯一可以改变state数据的

actions：异步操作

getters：相当于计算属性

在页面中调用vuex中state的数据可以这样写：

<div>{{$store.state.值}}</div>

想要更改vuex里的数据必须使用this.$store.commit()传到vuex，然后在vuex的mutations中修改：

export default {
    data() {
        return {};
    },
    created() {},
    methods: {
      a(){
        this.$store.commit('事件名',要传递的数据 )
      }
    },
    components:{}
};

actions是异步操作：

比如在异步中请求json数据可以这样写：

1、定义的函数第一个参数是‘context’，然后使用context.$commit(‘事件名’，res数据)传递到mutations中。记得在mutations定义事件

    mutations: {
    setlist(state,val){
   


    },
    actions: {
    getlist(context){
      axios.get('/data.json').then(res=>{
        console.log(res)
      context.commit('setlist',res.data)

      })

    }
  },

2、最后记得在主页面触发异步操作

  created() {
    this.$store.dispatch("getlist");
  },

module 模块化用法：

每一个模块都有完整的5大属性，可以在里面定义属性

  modules: {
    a:{
      state:{
        num:1000
      },
      mutations: {
      },
      actions: {
      },
    }
  }

使用时直接在页面中写，如下：

    {{$store.state.a.num}}

getters计算属性，和vue计算属性性质一样

4大辅助函数：

mapState     在计算属性中展开

mapGetters     在计算属性中展开

mapMutations    在方法中展开

mapActions      在方法中展开

谁要使用就引入对应的辅助函数： 

import {mapState,mapGetters......} from 'vuex'

mapState例子：

 computed: {
    ...mapState({
      aaa: "num",
    }),

最后直接插值就能展示出相应的数据了