## vuex基本使用方法

1.安装配置vuex，版本依赖

vue2的项目使用vuex3，vue3的项目使用vuex4

npm install vuex --save 这个指令默认安装Vuex4

npm install vuex@3 @代表安装指定版本的Vuex3

2.创建 store/index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 全局都可以使用的数据
  state: {
  },
  // getters, 相当于对state里的数据进行运算得到的数据 类似于computed对于data的处理
  getters: {
  },
  // mutations，定义修改state里面数据的方法
  mutations: {
  },
  // actions用法--actions中的方法触发mutations中的方法从而改变state里的数据;
  // 除此之外，如果需要异步操作，就必须在actions中执行
  actions: {
  },
  // 将同一类型的数据组合成一个模块
  modules: {
  }
})

3、Vuex的基本使用

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，所有修改State的操作必须通过Mutation进行，Mutation的同时提供了订阅者模式供外部插件调用获取State数据的更新。所有异步接口需要走Action，常见于调用后端接口异步获取更新数据，而Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。Vuex运行依赖Vue内部数据

1,$store.state

通过这个方式，能直接使用state里的数据

    <i>msg:{{$store.state.msg}}</i>
    <p>num:{{$store.state.num}}</p>

2、mutations

要想修改state的数据必须通过mutations

  在store/index.js中配置 
  // mutations，定义修改state里面数据的方法
  mutations: {
    updateMutationMsg (state) {
      state.msg = '修改之后的msg数据'
    }
  },

  //在  .vue的文件中使用
  methods: {
    updateStoreMsg () {
    // 组件methods通过调用vuex实例的commit方法触发mutations中的方法修改msg
      this.$store.commit('updateMutationMsg')
    }
  },

3，action

所有异步接口需要走Action,然后调用mutations中的方法，更改state中的数据

配置

  actions: {
    // actions方法中触发mutations中的方法
    async actionUpdateNum (c, val) {
      const res = await axios.get('http://47.100.227.25:3000/books/queryall')
      // 触发vuex实例mutations中的指定方法updateMutaNum
      c.commit('updateMutaNum', res[0].id)
    }
  }

使用

  methods: {
    // 组件methods中通过vuex实例的dispatch方法触发vuex中actions里的方法，
    updateNum (val) {
      this.$store.dispatch('actionUpdateNum', val)
    }
  },

4.getters

  // getters, 相当于对state里的数据进行运算得到的数据 类似于computed对于data的处理,需要返回值
  getters: {
    numDouble (state) {
      return state.num * 2
    }
  },

5，modules

将相关的数据处理作为一个模块

  modules: {
    hh: msgModule
  }
  
  
const msgModule = {
   // 全局都可以使用的数据
  state: {
  },
  // getters, 相当于对state里的数据进行运算得到的数据 类似于computed对于data的处理
  getters: {
  },
  // mutations，定义修改state里面数据的方法
  mutations: {
  },
  // actions用法--actions中的方法触发mutations中的方法从而改变state里的数据;
  // 除此之外，如果需要异步操作，就必须在actions中执行
  actions: {
  },
  // 将同一类型的数据组合成一个模块
  modules: {
  }
}