Vue2中Vuex使用

vuex的五个状态

// 1.存储数据
  state: {

  },

// 2.修改数据
  mutations: {

  },

// 3.计算属性
  getters: {

  },

4.//异步（发送请求）
  actions: {

  },

// 5.模块化
  modules: {

  }

使用方法:

1.1 存储数据：

  state: {
    name:'张三',
    infodata:{},
  },

1.2 访问数据

this.$store.state.name

//推荐在计算属性里面访问

    computed: {
        x_name() {
            return this.$store.state.name
        }
    }

2.1 修改数据

定义一个方法，接受2个参数，第一个指向state,第二个是传入的值

  mutations: {
    changname(state, val) {
      state.name = val
    },
    data(state,val){
        state.infodata=val
    }
  },

2.2 调用修改

触发事件通过this.$store.commit('changname', '李四')进行修改，传入2个参数，第一个是函数名，第二个修改的参数会被val接收。

代码示例

<button @click="a">点击发送修改/button>
<script>
export default {
       methods: {
          a() {
            this.$store.commit('changname', '六思逸')
        }
    },
}

3.1 发送请求

     //异步（发送请求） 
    //在顶部引入：import { $_ShopEeller } from '@/apis/index.js'
  actions: {
    async info (infos){ //infos,用于触发mutations里面修改方法
        let res = await $_ShopEeller()
        infos.commit('data',res)//data 定义修改的方法，res=值
    }
  },

3.2 页面调用请求

    created() { 
        //页面初始化触发actions里面请求info
        this.$store.dispatch('info')
    },

4.1 计算属性

  getters: {
    shoplist(state) {
      let newarr = []
      for (let key of state.goodlist) {
        for (let chil of key.foods) {
          if (chil.valueNum > 0) {
            newarr.push(chil)
          }
        }
      }
      return newarr
    }
  },

4.2 调用方法

在计算属性computed内调用，方法：$store.getters.shoplist 有利于性能，当引用的数据发生改变才会重新计算，有缓存性，
接收一个参数，指向state（vuex数据存储的地方）通过state.名字可以访问到，state里面的数据。

    computed: {
        numzj() {
            return this.$store.getters.shoplist
        },
    },