Vuex 是什么？

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

什么情况下我应该使用 Vuex？

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

安装

npm

npm install vuex@next --save

Yarn

yarn add vuex@next --save

vue2 中的使用

import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

mapState 辅助函数

<template>
  <div class="vuex-one">
    <div>{{ userInfo.name }}</div>
    <div>{{ count }}</div>
  </div>
</template>


<script>
import { mapState } from "vuex";
//引入mapState辅助函数
export default {
  // computed:mapState(['userInfo'])
  computed: {
    count(){
        return 22222
    },
    ...mapState({
      userInfo: (state) => state.userInfo,
      //在computed中使用mapState将vuex中存储的数据调用过来 可以在页面中执行
    }),
  },
};
</script>

mapGetters 辅助函数

getters: {
  userNameChange(state) {
  //定义方法 ，参数是vuex中的数据
    return state.userInfo.name + '小朋友'
    //将vuex中对应的数据修改并返回出去
  },
  // 调用的时候传参
  userNickname: (state) => (type) => {
    return `${state.userInfo.nickname}-${type}`
  }
},

组件定义

computed：{
  ...mapGetters(["userNameChange", "userNickname"])
 通过mapGetters将方法从对应的模块调用过来
}

mapMutations

定义同步方法

mutations: {
  changeMyName(state, val) {
  接收两个参数一个是vuex中的state，另一个是接受用户传递的数据
    state.userInfo.name = val;
  }
},

调用mutations里面的方法

<template>
  <div class="vuex-one">
    <div>{{ userInfo.name }}</div>
    <div>{{ count }}</div>
    <div>{{ userNameChange }}</div>
    <div>{{ userNickname("人名") }}</div>
    <button @click="changName">修改名字</button>
  </div>
</template>


<script>
import { mapState, mapGetters, mapMutations } from "vuex";
//引入辅助函数
export default {
  // computed:mapState(['userInfo'])
  computed: {
    count() {
      return 22222;
    },
    ...mapState({
    //将vuex中的数据调用过来
      userInfo: (state) => state.userInfo,
    }),
    ...mapGetters(["userNameChange", "userNickname"]),
  },
  methods: {
    changName() {
      // 二选一 第一种是辅助函数，第二种是直接调用。
      this.changeMyName("修改名");
      //调用vuex方法修改数据
      this.$store.commit('changeMyName',"修改名")
     
    },
    ...mapMutations([
      "changeMyName", // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    ]),
  },
};
</script>

mapActions

定义

actions: {

    zchangeMyNameAct(context, val) {
    //定义异步方法 接收两个参数 第一个是传入同步的方法，第二个是修改的值
      setTimeout(() => {
        context.commit('changeMyName', val)
      }, 1000)
    }
  },

组件调用

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
引入辅助函数
export default {
  // computed:mapState(['userInfo'])
  computed: {
    count() {
      return 22222;
    },
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
    ...mapGetters(["userNameChange", "userNickname"]),
  },
  methods: {
    changName() {
      this.changeMyNameAct("修改名");
      //调用异步方法 接收参数 到vuex中修改数据
    },
    ...mapMutations([
      "changeMyName", // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    ]),
    ...mapActions(["changeMyNameAct"]),
    //注册异步方法
  },
};
</script>