对Vuex的理解和简单使用

对Vuex的理解和使用

1、什么是vuex？
vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则状态以一种可预测的方式发生变化
2. vuex是用来解决什么问题的？
vuex用来解决多个组件状态共享。如果项目中多处用到同一个数据，可以考虑放在store里。总而言之，如果只是局部父子组件之间的数据问题，就用props等处理，全局状态的话考虑vuex，统一管理。
3.vuex的运作图解

4.vuex的具体用法
1）首先在vue.js开发环境中安装vuex
npm install vuex --save
2) 在main.js中创建store对象

    import vuex from "vuex";
    Vue.use(vuex);
    var store = new vuex.Store({// store对象
       state: {
         count: 0
       }
    })

完成到这一步，如果要访问count的话,this.$store.state.count

现在还有一个问题，store对象是放在main.js里面，为了方便日后的维护管理，最好把vuex的配置单独放出啦，在src下新建一个store文件夹，创建一个index.js

import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
export default new vuex.Store({
    state:{
        count:4
    }
})

main.js中的代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from "./store/index"
Vue.config.productionTip = false
// 在vue实例化的时候加入store对象
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

组件访问state的方式

第一种：

this.$store.state.xxx

第二种：从vuex中按需导入mapState函数

import {mapState} from "vuex"

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性

如何改变store中的数据？
Mutation 用于变更Store中的数据
1. 只能通过mutation变更Store数据，不可以直接操作Store中的数据
2. 通过这种方式虽然操作稍微繁琐一些，但是可以集中监控所欲数据的便化。

在store/index.js中

import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
export default new vuex.Store({
    state:{
        count:4
    },
    mutations:{
        add(state){
            // 变更状态
            state.count++;
        }
    }
})

在组件中触发mutations的第一种方式

methods:{
    handleCount(){
      // 触发mutations的第一种方式
      this.$store.commit("add");
    }
  }

可以在触发mutations时传递参数：

mutations:{
        add(state,step){
            // 变更状态
            state.count+=step;
        }
    }

在组件中的用法：

handleCount(){
      // 触发mutations的第一种方式
      this.$store.commit("add",8);
    }

触发mutations的第二种方式：
在组件中：

import {mapState,mapMutations} from "vuex"

 methods:{
    handleCount(){
      // 触发mutations的第一种方式
      this.$store.commit("add",8);
    },
    ...mapMutations(["add"])
  }

 <button @click="add(3)">MapMutations Click </button>

什么是actions?
背景：在mutation中我们讲到，mutation中是存放处理数据的方法的集合，我们使用的时候需要commit.但是commit是同步函数，而且只能是同步执行。那我们想异步操作怎么办？
作用：在actions中提交mutation,并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）

1. 定义actions
  在store/index.js中

import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
export default new vuex.Store({
    state:{
        count:4
    },
    mutations:{
        add(state,step){
            // 变更状态
            state.count+=step;
        },
        addN(state,step){
            state.count+=step;
        }
    },
    actions:{
        addNAsync(context,step){
            setTimeout(()=>{
                context.commit("addN",step)
            },1000)
        }
    }
})

触发actions

在组件中：
第一种触发actions的方式

 handle(){
      // 调用dispatch函数
      // 触发actions时携带参数
      this.$store.dispatch("addNAsync",5)
    },

第二种触发actions的方式：

import {mapState,mapMutations,mapActions} from "vuex"
  ...mapActions(["addNAsync"])（在methods中）
 <button @click="addNAsync(5)">mapActions click</button>