Vuex核心概念

State状态

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储

在State对象中可以添加我们要共享的数据

添加数据

// 创建仓库
const store = new Vuex.Store({
  // 1. 通过 state 可以提供数据 (所有组件共享的数据)
  state: {
        //创建需要共享的内容
      }
  }

使用数据

1.通过store直接访问

this.$store

2.通过辅助函数

import 导入 store

mapState辅助函数

mapState是辅助函数,帮助我们把store中的数据自动映射到组件的计算属性中

在app.Vue文件下

1.导入mapState

import {mapstate} from 'vuex

2.数组方式引入state

mapstate(['仓库的数据'])

3.展开运算符映射

computed:{
    ...mapState(['仓库的数据'])
}

mutations修改数据

明确vuex同样遵循单向数据流，组件中不能直接修改仓库的数据，mutations必须是同步的

vuex严格模式

错误的Vue语法会报错，利于检测不规范代码，上线时需要关闭

strict:true

mutations对象

1.定义mutations对象，对象中存放修改state的方法

仓库位置执行以下代码

// 创建仓库
const store = new Vuex.Store({
  // 1. 通过 state 可以提供数据 (所有组件共享的数据)
  state: {
        //创建需要共享的内容
      },
    mutations: {
        //第一个参数是store
        函数(state) {
            函数内要执行的仓库操作
            }
        }
  }

2.组件中提交调用mutations

组件位置执行以下代码

this.$store.commit('仓库中定义的函数')

总结，在组件下绑定点击按钮的函数后，在函数内编写this.$store.commit( ),( )内调用在仓库mutations对象里编写好的函数

3.mutations传参

// 创建仓库
const store = new Vuex.Store({
  // 1. 通过 state 可以提供数据 (所有组件共享的数据)
  state: {
        //创建需要共享的内容
      },
    mutations: {
        //第一个参数是store
        函数(state,参数) {
            函数内要执行的仓库操作
            }
        }
  }

this.$store.commit('调用仓库对应方法的函数名',参数)

mapMutations辅助函数

它是把位于mutations中的方法提取出来，映射到组件methods中

methods: {
    ...mapMutations(['subCount'])
}

调用

this.subCount(参数)

actions

处理异步操作

注意：不能直接操作 state，操作 state，还是需要 commit mutation

提供action方法

actions: {
    setsynConut (context, 参数) {
    //编写异步处理代码
    context.commit('mutations名字', '额外传参')
    }
}
// context（此处未分模块，可以当成store仓库）

页面调用

this.$store.dispatch('setsynConut',传参)

mapActions辅助函数

mapActions是把位于actions中的方法提取出来，映射到组件methods中

...mapActions(['changeCountAction'])    // actions中定义的函数名

调用

this.changeCountAction(参数)

getters

类似计算属性

例如：state中定义数组，为1-5的数组，组件中要显示累加合

state: {
    list: [1, 2, 3, 4, 5]
}

1.定义getters

在仓库里定义

getters: {
    sumCount (state) {
      let sum = 0;
      state.list.forEach(item => {
        sum += item; // 将数组中的每个元素累加到sum变量上
      });
      return sum; // 返回累加的总和
    }
  }
// getters函数的第一个参数是state
// getters函数必须是要有返回值

2.访问getters

通过store访问getters

{{ $store.getters.sumCount }}

通过辅助函数mapGetters映射

computed: {
    ...mapGetters(['sumCount'])
}

// 调用
{{ sumCount }}

模块module

由于Vuex

使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿（Vuex的维护越来越难）

单一状态树

store: {
    user: {
        name: 'itwk',
        age: 16,
    },
    itwk: {
    age: 18,
    name: 'wk'
    },
    gerdns: 'username',
    desc: 'stdio项目'
}

模块拆分

在store文件下新建modules文件夹用来存放,属性名就是模块名

拆分模块

const state = {
    userInfo: {
    name: 'itwk',
    age: 16
    }
}
const mutations = {}
const actions = {}
const getters = {}

export default {
    state,
    mutations,
    actions,
    getters
}

使用模块

import .Vue文件名 from '文件路径'

const store = new Vuex.Store({
    modules: {
    .Vue文件名
    }
})

state访问

1.直接通过模块名访问

$store..state.模块名.xxx

2.通过mapState映射

默认根级别的映射

mapState(['xxx'])

子模块的映射-需要开启命名空间

mapState('模块名', ['xxx'])

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

getters访问

直接通过模块名访问

$store.getters['模块名/xxx']

通过mapGetters映射

默认根级别映射

mapGetters(['xxx'])

子模块的映射-需要开启命名空间

mapGetters('模块名',['xxx'])

mutation调用语法

直接通过store调用

$store.commit('模块名/xxx',额外参数)

通过mapMutation映射

默认根级别的目录

mapMutations(['xxx'])

子模块的映射-需要开启命名空间

mapMutations('模块名',['xxx'])

action调用语法

直接通过store调用

$store.dispatch(['xxx'])

通过mapActions映射

默认根级别的隐射

mapActions(['xxx'])

子模块的映射

mapActions('模块名','[xxx]')