vuex使用看这篇就够了

一、Vuex 介绍

1. Vuex 是 vue 项目中实现大范围数据共享的技术方案

2. Vuex作用：能够方便、高效地实现组件之间的数据共享

3. 使用 Vuex 的好处:

   1. 数据的存取一步到位，不需层层传递
   2. 数据的流动非常清晰
   3. 存储在 Vuex 中的数据都是响应式的

二、使用步骤

引入库

代码如下（示例）：

//在store文件/index.js 配置
// 1. 下包
npm i vuex   
// 2. 导入 Vuex 
import Vuex from 'vuex'   
// 3. 安装 Vuex 插件
Vue.use(Vuex)    
 // 4. 创建 store 对象
const store = new Vuex.Store({})   
// 5. 默认导出 store 对象
export default store		

//在main.js配置
// 6. 导入 store 对象
import store from './store'	
// 7. 挂载到 Vue 实例上	
new Vue({				
  render: h => h(App),
  store
}).$mount('#app')

三、 vuex成员介绍

1.State 的基本使用

• 概念：State 本质上就是 Object 对象
• 作用：用来存储全局共享的数据
• 组件访问 State 数据的第一种方式

 this.$store.state.全局数据名称

组件访问 State 数据的第二种方式(有辅助函数)

// 1.按需导入
    import { mapState} from 'vuex'
    
// 2. 在计算属性中调用 mapState
    ...mapState(['count', 'username', 'list']),
    
// 3.在store文件/index.js 
    state: {
        count: 0,
        username: 'xxx',
        list: [ ]
      }
 

2.Mutation 的基本使用

• Mutation 本质 : 是 JavaScript 函数
• 特点：想要修改 State 中的数据，只能调用 Mutation 方法！
• 好处：能够确保修改来源的唯一性，方便调试和后期维护
• 作用 : 专门负责修改 State 中的数据
• 所有 mutation 函数第一个参数都是 state (必须是同步任务 )

// 1. 定义 mutation 函数
mutations: {
  addCount (state, payload) {
     console.log(payload)
  }
}
// 2.在 methods 中调用函数
 this.$store.commit('addCount', { num: 1 })

// 1.按需导入
    import {  mapMutations } from 'vuex'
    
// 2. 在 methods 中调用 mapMutations辅助函数    
     methods: {
    ...mapMutations(['addCount']),
    }

3.Action 的基本使用

• Action 本质上是 JavaScript 函数，专门用来处理 Vuex 中的异步操作
• Action 不能直接修改数据源
• Action 把异步操作的结果，转交给 Mutation，由 Mutation 负责修改数据源

 // 1. 定义 action 函数
 actions: {
    // 所有 action 函数第一个参数都是 context 上下文对象 -> 当成 store 对象使用
    
// 2.第二个参数是 payload 载荷传递过来的参数
    addAsync(context, payload) {
      context.commit('addCount', payload)
    }

// 1. 按需导入辅助函数
  import { mapActions} from 'vuex'
  
// 2. 在 methods 中调用 mapActions辅助函数
  methods: {
    ...mapActions(['addAsync']),
      asyncAddCount() {
      // 调用 action 中的 addAsync
      this.$store.dispatch('addAsync', { num: 100 })
      //有辅助函数的做法
      this.addAsync({ num: 100 })
    }   
}

4 .Getter 的基本使用

• Getter 本质上是 JavaScript 函数
• getters 等于是 Vuex 中的计算属性, 所以可以全局共享使用
• 作用：它是 Vuex 中的计算属性，当 Store 数据源发生变化时，Getter 的返回值会自动更新。
• getters 等于是 Vuex 中的计算属性, 所以可以全局共享使用

getters: {
    // 1. 定义 getters
    // 2.第一个参数永远都是 state
    // 3.必须要返回一个结果
    isAll(state) {
      return state.list.every(item => item.isDone)
    }
  },

// 1. 按需导入辅助函数
  import { mapActions} from 'vuex'
  
// 2. 在计算属性中调用 mapGetters
    ...mapGetters(['isAll']),

5.Module 的基本使用

• Vuex 中的 Module 表示按照模块化的开发思想，把不同的数据和方法，按照彼此的关联关系进行封装
• 每个模块都是彼此独立的，都可以拥有自己的 state、mutations、actions、getters 节点

// 1. 导入子模块
	import count from './count'
	import cart from './cart'
	
// 2. 注册模块
modules: {
    // 属性名就是模块名
    // 属性值就是模块对象
    // count: count
    // 不要和全局 state 中的数据重名
    moduleCount: count,
    moduleCart: cart
  }

总结

• mapState: 映射 state 中的数据
• mapMutations: 映射 mutations 的函数
• mapActions: 映射 actions 的函数
• mapGetters: 映射 getters 中的计算属性
• 所有的辅助函数调用都会返回一个对象, 对象中存放着映射过来的函数

建议:

• 如果访问数据建议使用辅助函数, 会更方便
• 如果是调用 mutation 或 action 的函数, 可以不用使用辅助函数