关于vuex的知识

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

• 它采用集中式存储管理应用的所有组件的状态（vuex是vue中集中管理数据工具）
• vuex通常用于什么样项目：根据项目复杂程度，组件比较多，数据传递比较复杂，数据难于管理时，就会想到vuex,例如：电商，后台管理的项目
• vuex的核心：
  1.state：数据仓库用于存储数据

const state = {
  count: 0,
  took: ' fdevdfjvbdfjvn'
}
export default state

取值的方式有两种：

第一种方式：this.$store.state.count
第二种方式：通过mapSate读取(也称做vuex辅助函数)
  步骤：
  1.import { mapState } from 'vuex'
    	...mapState(['count')

2.actions:通常用于异步方法操作，但不会在这步改变state值,通常会调用mutations中的方法

const action = {
// 定义一些异步操作
  shang ({ commit }, value) {
    commit('jia')
  },
  xia () {
    console.log('减的方法')
  }
}
export default action

第一种方法：this.$store.dispath('actions的方法名',要传递的值)
第二种方法：
  1.import { mapActions } from 'vuex'
    	...mapActions(['count'])

3.mutations在这里面操作state中的数据
在actions中方法中通过commit(‘mutaions方法名’,要传递的值);
4.getters: getters相当于是vuex中的state的计算属性
可以将state中的数据进行加减过滤等一些操作

第一种方法：this.$store.getters.getters的计算属性名
第二种方法：
  1.import { mapGetters } from 'vuex'
   ...mapGetters(['count', 'token', 'index'])

5，module:由于satte中的数据量太大所以vuex就提供了一个modules来进行
进行管理切割

//在文件中建一个modules文件，然后在文件中间需要的想购物车模块，
列表页模块的js文件在里面写上
const user = {
  state: {
  },
  actions: {

  },
  mutations: {

  }
}
export default user

然后要在vuex的index.js文件中引入刚才写的文件

import list from './modules/list'
import shop from './modules/shop'
  modules: {
    list: list,
    shop: shop
  },

然后在文件中引入的话是使用this.$store.state.list.
无论用module切割多少个store,最终都会将state,actions,modules合并到一个store树上面