vuex的核心使用-2

State

1. 介绍

在Vuex中，State是存储数据的核心概念，它代表了整个应用程序的最终状态。

State是响应式的，这意味着当State中的数据发生变化时，依赖于这些数据的视图组件会自动更新。
State可以包含任何类型的数据，如字符串、数字、对象、数组等。在Vuex中，State的数据结构是由开发者自己定义的，可以根据应用程序的需求进行设计。

2. 创建数据

在主仓库中创建：

// 创建仓库 store
const store = new Vuex.Store({
  modules: {
    user
  },
  // 开启严格模式
  strict: true,
  // 通过state 提供共享数据
  state: {
    title: '大能静静学院',
    count: 100,
    xxx,
    ....
  },
  mutations: {
    addCount (state, num) {
      console.log(num)
      state.count += num
    },
    updateCount (state, num) {
      console.log(num)
      state.count = +num
    }
  },
  actions: {
    asyncAddCount (content) {
      setTimeout(() => content.commit('addCount', -1), 1000)
    }
  },
  getters: {
  }
}

在user模块中创建

// 数据
const state = {
  list: [1, 2, 3, 4]
}
const mutations = {}
const actions = {}
const getters = {}

export default {
  namespaced: 'true', // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

3. 获取数据

3.1 通过$store访问的语法获取：

a. 获取主仓库中的数据

模板中：     {{ $store.state.xxx }}
组件逻辑中：  this.$store.state.xxx
JS模块中：   store.state.xxx

b. 获取模块中的数据

$store.state.模块名.xxx
// 如：
$store.state.user.list

3.2 mapState 映射函数获取：

a. 获取主仓库中的数据

• 导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

• 利用展开运算符将导出的状态映射给计算属性

computed: {
  ...mapState(['count'])
},

• 直接使用

 <div> state的数据：{{ count }}</div>

b. 获取模块中的数据

• 将上面a 的第二步改为：下面的这个形式即可

computed: {
...mapState('user', ['list']),
...mapState('模块名', ['数据名1', '数据名2']),
},

mutations

1. 介绍

Mutation：用来修改state的唯一途径。在Vuex中，任何对state的修改都必须是显式提交mutation。mutation必须是同步函数。

类似于：methods

2. 创建数据

在主仓库中创建：

// 创建仓库 store
const store = new Vuex.Store({
  modules: {
    user
  },
  mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state, num) {
      console.log(num)
      state.count += num
    }
  }
}

在user模块中创建

// 数据
const state = {}
const mutations = {
   addCount (state, num) {
      console.log(num)
      state.count += num
    },
}
const actions = {}
const getters = {}

export default {
  namespaced: 'true', // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

3. 获取数据

3.1 通过$store访问的语法获取：

a. 获取主仓库中的数据

handle ( ) {
  this.$store.commit('addCount', 10)
  // this.$store.commit('addCount', num)
}

b. 获取模块中的数据

// 在组件中
this.$store.commit('user/addCount', 参数);

3.2 mapState 映射函数获取：

a. 获取主仓库中的数据

• 导入mapState (mapState是vuex中的一个函数)
• 利用展开运算符将导出的状态映射给计算属性

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

• 使用

<button @click="addCount">值+1</button>

b. 获取模块中的数据

methods:{
  // 分模块的映射
  ...mapMutations('user', ['addCount']),
}

actions

1. 介绍

Action：类似于mutation，可以包含任意异步操作。

2. 创建数据

在主仓库中创建：

// 创建仓库 store
const store = new Vuex.Store({
  modules: {
    user
  },
  actions: {
    setAsyncCount (context, num) {
      // 一秒后, 给一个数, 去修改 num
      setTimeout(() => {
        context.commit('changeCount', num)
      }, 1000)
    }
  },
}

在user模块中创建

// 数据
const state = {}
const mutations = {}
const actions = {
    setAsyncCount (context, num) {
    // 一秒后, 给一个数, 去修改 num
    setTimeout(() => {
      context.commit('changeCount', num)
    }, 1000)
  }
}
const getters = {}

export default {
  namespaced: 'true', // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

3. 获取数据

3.1 通过$store访问的语法获取：

a. 获取主仓库中的数据

handle ( ) {
  this.$store.dispatch('setAsyncCount', 参数)
}

b. 获取模块中的数据

// 在组件中
this.$store.dispatch('user/setUserSecond', 参数)

3.2 mapActions 映射函数获取：

a. 获取主仓库中的数据

• 导入mapActions(mapActions是vuex中的一个函数)
• 利用展开运算符将导出的状态映射给计算属性

import { mapActions } from 'vuex'
methods: {
   ...mapActions(['changeCountAction'])
}

• 使用

<button @click="changeCountAction(200)">+异步</button>

b. 获取模块中的数据

<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>

methods:{
  ...mapActions('user', ['setUserSecond'])
}

getters

1. 介绍

Getter：对state进行更复杂的数据操作，例如计算属性。这些计算属性的值是基于state的计算得出的。

2. 创建数据

在主仓库中创建：

// 创建仓库 store
const store = new Vuex.Store({
  modules: {
    user
  },
  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }
}

在user模块中创建

// 数据
const state = {}
const mutations = {}
const actions = {}
const getters = {
      // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
}

export default {
  namespaced: 'true', // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

3. 获取数据

3.1 通过$store访问的语法获取：

a. 获取主仓库中的数据

<div>{{ $store.getters.filterList }}</div>

b. 获取模块中的数据

$store.getters['模块名/属性名']

3.2 mapActions 映射函数获取：

a. 获取主仓库中的数据

• 导入mapActions(mapActions是vuex中的一个函数)
• 利用展开运算符将导出的状态映射给计算属性

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(['filterList'])
}

• 使用

 <div>{{ filterList }}</div>

b. 获取模块中的数据

// 计算属性
computed:{
  ...mapGetters('user', ['filterList'])
}

总结

1. 直接使用

1. state --> $store.state.模块名.数据项名
2. getters --> $store.getters['模块名/属性名']
3. mutations --> $store.commit('模块名/方法名', 其他参数)
4. actions --> $store.dispatch('模块名/方法名', 其他参数)

2. 借助辅助方法使用

import { mapXxxx, mapXxx } from 'vuex'

computed、methods: {

    // **...mapState、...mapGetters放computed中；**
    //  **...mapMutations、...mapActions放methods中；**
   ...mapXxxx('模块名', ['数据项|方法']),
   ...mapXxxx('模块名', { 新的名字: 原来的名字 }),

}

3. 组件中直接使用

• 属性 {{ age }} 或 方法 @click="updateAge(2)"