三分钟带你精通vuex

1.学习vuex的目标           

•  知道vuex是什么以及作用
• vuex中弍参数的使用
• 使用map辅助工具简化vuex的使用
   

2.vuex是什么？

概念：

• vuex是集中式状态管理模式的开发工具 采用集中式管理 解决多个数组之间的通信

• 数据变化是响应式的

3.vuex中五个参数的基本使用

       3.1 state -----作用：保存公共数据

//1.在store实例中定义
const store = new Vuex({
    state: {
        name: 'zs',
        age: 18
    }
})
//2.在组件中进行调用  
this.$store.state.name  //zs

        3.2 mutations----作用：修改公共数据         

         注意：修改公共数据 如果要修改vuex中的state的数据 必须调用mutations 中的方法来进行改变公共数据  代码演示：

        

//在store实例中定义
const store = new Vuex({
    state: {name:'zs'},
    mutations: {
        //state代表store实例中的数据  第二个形参表示传入的参数
        btn(state, newName) {
            state.name = newName
        }
    }
})
//在组件中使用
this.$store.commit('btn','ww')  //调用store实例中的  mutations中的btn方法

3.3 getters ----作用：加工state中的数据 类似于 vue中的计算属性 computed 计算属性   代码演示：

//1.在store实例中定义
const store = new Vuex({
    state: {},
    mutations: {},
    getters: {
        getSum(state) {
            return state.books.reduce((sum, item) => sum + item.price, 0)
        }
    }
})
//2.在组件中进行调用
this.store.getters.getSum  //总价

3.4 actions作用---进行异异步操作 主要应用于发送异步ajax请求

        

//1.在store实例中定义  context参数指向当前store实例对象  可以调用context.commit(mutations中的方法名,传入的参数)进行修改state中的数据
// 必须调用mutations中的方法才能修改state中的数据
const store = new Vuex({
    state: {},
    mutations: {},
    getters: {},
    actions: {
        async action1(context) {
            const res = await axios({
                url: "https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books",
            })
        }
    }
})

3.5modules使用步骤

• 作用：拆分负责业务 遵循模块化 组件化的开发
• 使用步骤：1.新建模块组件 将需要抽离的功能模块的代码进行抽离
• 2.在抽离的模块中默认导出抽离的对象 头行设置 namespace：true 为true表示在组件中调用需要加上模块名 false则不用加
• 3.在store实例中定义module 设置namespace属性
• 4.在store实例文件中 引入抽离的模块 使用key:value的格式挂载到modules上
• 代码：

//module/books.js
import axios from 'axios'
export default {
    // namespaced这个属性推荐加上 为true就访问state前面要写模块名  false不用写
    namespaced: true,
    state: {
        books: [],
        name: '西游记',
    },
    mutations: {
        updataBooks(state, newBooks) {
            state.books = newBooks
        },
    },
    getters: {
        getSum(state) {
            return state.books.reduce((sum, item) => sum + item.price, 0)
        }
    },
    actions: {
        action1(context) {
            // context指向当前store实例 
            axios({
                url: "https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books",
            }).then(res => {
                context.commit('updataBooks', res.data.data)
                console.log(context.state.books);
            })
        }
    }
}

//   store/index.js
//引入模块
import books from './modules/books'
//进行挂载
const store = new Vuex({
    state: {},
    mutations: {},
    getters: {},
    actions: {},
    module: {
        books  //es6简化语法
    }
})

//app.vue  组件中使用
//  1.模块使用state   this.$store.state.模块名.属性名
		<h2>书名：{{ $store.state.books.name }}</h2>

//	2.模块使用 mutations  this.$store.模块名.commit('方法名',参数)
		<button @click="$store.commit.books('btn', 'www')">全局调用mutations</button>

//  3.模块使用 getters    this.$store.getters['模块名/属性名']
		 <h2>总价{{ $store.getters["books/getSum"] }}</h2>

//  4.模块使用 actations  this.$store.dispatch('模块名/action名')

4.map辅助工具的使用

作用：优化访问方式----我们在组件中访问vuex中的state、mutations等等 会是这样访问 $store.state.属性名来访问
           那么我们可不可以优化这种代码访问呢  答案是可以的： 通过 按需导入导入vuex中的map文件---import {mapState} from 'vuex'
           其中有一个注意点：
            state、getters是在组件计算属性computed中定义**
            mutations、axios都是在组件的方法中进行定义  ...是扩展运算符 相当与把对象展开 挂载到computed身上 直接就可以访问计算属性了**

4.1state的map用法

//1.在组件中按需引入map文件
import {mapState} from 'vuex'
//2.在computed中定义
computed: {
    ...mapState("books", { bkname: "name" }),  //修改名字  books是模块名
    ...mapState(books,['name'])               //不修改名字 直接使用
    
  },
 //定义完成就可以直接使用了  修改了名字直接使用修改后的名字即可  未修改直接使用未修改的名字  
 //这时候name变量已经挂载到computed属性上了  介意直接进行使用
 <h1>{{bkname}}</h1>  
 <h1>{{name}}</h1>

4.2getters的map用法

//1.在组件中按需引入map文件 多个文件逗号隔开
import {mapGetters,mapState} from 'vuex'
//2.在计算属性中进行定义
computed: {
     ...mapGetters("books", { sum: "getSum" }), //修改了传入的名字 挂载到computed计算属性上
  },
   <h1>{{sum}}</h1>  

4.3 mutations的map用法

//1.在组件中按需引入map文件
import {mapGetters,mapState,mapMutations} from 'vuex'
//2.在methos中进行定义
methods:{
    ...mapMutations({btnName:'btn'})  //更改了store实例中的方法名 挂载到当前vue实例 
}
//在事件中可以直接进行调用 
  <button @click="btnName('zsss')">map方式进行调用</button>

4.4 actions的map用法：

//1.在组件中按需引入，map文件
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
//2.在methos中进行定义
methods:{
        ...mapActions("books", { ajax: "action1" }), //更改了名字
}
 //可以直接进行调用
  <button @click="$store.dispatch('books/action1')">全局发起ajax请求</button>

以上就是全部内容了  下面是今日作业 理解所画关系图