vuex的核心

VueX是适用于在Vue项目开发时使用的状态管理工具
vuex在项目复杂程度，组件比较多，数据传递比较复杂，数据难于管理时来使用

vuex核心内容
成员列表：

• state 存放状态

• mutations state成员操作

• getters 加工state成员给外界

• actions 异步操作

• modules 模块化状态管理

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树上面

今天分享到这里结束了 明天端午节记得吃粽子呀！！