Vuex

vuex的作用是在vue的项目中方便与页面与页面之间值的传递。

一. 安装vuex，使用命令

npm install vuex --save

二. 引入vuex

在项目src文件夹中创建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：

import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex

//使用vuex
Vue.ues(Vuex);

//创建vuex实例
const store = new Vuex.store({

})
export default store

三. 在主文件添加上面创建的文件

在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象

State

vuex中的数据源，我们需要保存的数据就保存在store/index.js，可以在页面通过 this.$store.state来获取我们定义的数据；

import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex

//使用vuex
Vue.ues(Vuex);

//创建vuex实例
const store = new Vuex.store({
  state: {
     count: 1
  }
})
export default store

Getters:

Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果。
vue文件内容：

<div>我是从页面上直接获得的： {{this.$store.state.count}}</div>
<div>我是从getter获取的计算的值： {{this.$store.getters.getStateCount}}</div>

store/index.js文件如下：

import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex

//使用vuex
Vue.ues(Vuex);

//创建vuex实例
const store = new Vuex.store({
  state: {
     count: 1
  },
  getters: {
    getStateCount: function(state) {  //为上面的state
       return state.count ++;
    }
  }
})
export default store

Mutations:

如果需要修改store中的值唯一的方法就是提交mutation来修改，我们现在Hello World.vue文件中添加两个按钮，一个加1，一个减1；这里我们点击按钮调用addFun（执行加的方法）和reductionFun（执行减法的方法），然后在里面直接提交mutations中的方法修改值：

<div>count的值： {{this.$store.state.count}}</div>
<button @click="addFun">加</button>
<button @click="reductionFun">减</button>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {}
    },
    methods: {
      addFun() {
        this.$store.commit("add");
      },
      reductionFun() {
        this.$store.commit("reduction");
      }
    }
  }
</script>

在store/index.js文件中，添加mutations，并定义两个函数add和reduction

import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex

//使用vuex
Vue.ues(Vuex);

//创建vuex实例
const store = new Vuex.store({
  state: {
     count: 1
  },
  getters: {
    getStateCount: function(state) {  //为上面的state
       return state.count ++;
    }
  },
  mutations: {
    add(state) {
      state.count ++;
    },
    reduction(state) {
      state.count --;
    },
  }
})
export default store

Actions:

我们看到，当点击三次后值从2变成了-1；页面上的值是改变了；我们达到了修改store中状态值的目的，但是，官方并不介意我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值，接下来我们修改index.js文件，先定义actions提交mutation的函数：

import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex

//使用vuex
Vue.ues(Vuex);

//创建vuex实例
const store = new Vuex.store({
  state: {
     count: 1
  },
  getters: {
    getStateCount: function(state) {  //为上面的state
       return state.count ++;
    }
  },
  mutations: {
    add(state) {
      state.count ++;
    },
    reduction(state) {
      state.count --;
    },
  },
  actions: { //注册actions，类似vue中的methods
    addFun(context) { //接受一个与store实例具有相同方法的属性的context对象
      context.commit("add");
    },
    reductionFun(context) {
      context.commit("reduction");
    },
  }
})
export default store

然后我们去修改Hello World.vue文件

<div>count的值： {{this.$store.state.count}}</div>
<button @click="addFun">加</button>
<button @click="reductionFun">减</button>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {}
    },
    methods: {
      addFun() {
        //this.$store.commit("add");
        this.$store.dispatch("addFun");
      },
      reductionFun() {
        //this.$store.commit("reduction");
        this.$store.dispatch("reductionFun");
      }
    }
  }
</script>

如果我们需要指定加减的数值，那么我们直接传入dispatch中的第二个参数，然后在actions中的对应函数中接受参数在传递给mutations中的函数进行计算：

<div>count的值： {{this.$store.state.count}}</div>
<button @click="addFun">加</button>
<button @click="reductionFun">减</button>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {}
    },
    methods: {
      addFun() {
        //this.$store.commit("add");
        this.$store.dispatch("addFun");
      },
      reductionFun() {
        var n = 10
        //this.$store.commit("reduction");
        this.$store.dispatch("reductionFun", n);
      }
    }
  }
</script>

store/index.js修改如下

import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex

//使用vuex
Vue.ues(Vuex);

//创建vuex实例
const store = new Vuex.store({
  state: {
     count: 1
  },
  getters: {
    getStateCount: function(state) {  //为上面的state
       return state.count ++;
    }
  },
  mutations: {
    add(state) {
      state.count ++;
    },
    reduction(state, n) {
      //state.count --;
      state.count = state.count - n; //传入需要减掉的值
    },
  },
  actions: { //注册actions，类似vue中的methods
    addFun(context) { //接受一个与store实例具有相同方法的属性的context对象
      context.commit("add");
    },
    reductionFun(context, n) {
      context.commit("reduction", n);
    },
  }
})
export default store

mapState、mapGetters、mapActions

如果我们不喜欢这种在页面上使用“this.store.dispatch('funName')”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；