Vuex@3版本的使用
day01
1. vuex概念
-
在Vue中实现集中式状态（数据）管理的一个
Vue插件，专门管理（读/写）多个组件的共享状态（数据），一种重要的组件通信方式，且适用于任意组件间通信。
2. 准备一个效果
3. 搭建Vuex环境
-
安装vuex：
npm i vuex@3 -
操作文件：
/src/main.jsimport Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' //===============> 追加这一句 Vue.config.productionTip = false //安装Vuex插件 Vue.use(Vuex) //===============> 追加这一句 let vm = new Vue({ el:'#app', render:h => h(App), //==========> 添加一个store配置项，值为一个Store的实例对象，通过 new Vuex.Store()得到。 store:new Vuex.Store({ actions:{}, mutations:{}, state:{} }) }) console.log(vm)//vm身上可以看到$store -
如何判断环境是否搭建成功？
①
vc身上、vm身上，可发现属性：$store。② 借助开发者工具，可以看到
vuex选项卡。
4. 单独配置 store
-
创建文件：
/src/store/index.jsimport Vue from 'vue' import Vuex from 'vuex' //使用vuex插件 Vue.use(Vuex) //创建一个store export default new Vuex.Store({ actions:{}, mutations:{}, state:{} }) -
在
main.js中创建vm时传入store配置项/***********/ //引入store import store from './store' new Vue({ el: '#app', render: h => h(App), store })
注意：脚手架在解析代码时，会将所有的
import语句做提升，所以我们不能在main.js中执行：Vue.use(vuex)
5. 读取state中的数据
-
修改
src/store/index.js文件，在state中放入数据。/******/ // 创建一个store export default new vuex.Store({ actions:{}, mutations:{}, state:{ sum:1 //当前的和 } }) -
组件中读取vuex中的数据：
this.$store.state.sum。
6. 不要直接修改 state
- 若直接修改
state：数据会变，视图也会更新，但开发者工具中没有任何的体现。 vuex中必须通过mutations中的方法去修改state，开发者工具才会捕获到。
7. 如何修改state中的数据
-
修改
src/store/index.js，配置actions、配置mutations。// 该文件主要用于：创建并暴露一个store实例 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ actions:{ /* 1.jia方法何时用？—— 有人联系actions中的jia的时候 2.jia方法会收到哪些参数？ —— context（集装箱，放置着我们可能用到的各种东西，但现在只用commit） —— value（组件那边携带过来的数据） 2.jia方法中的this是谁？—— Store实例对象（不常用，因为有了context） */ jia({commit},value){ console.log('actions中的jia执行了',value) // 下面这行的含义是：联系mutations中的jia commit('JIA',value) } }, mutations:{ /* 1.jia方法何时用？—— 有人联系mutations中的jia的时候 2.jia方法会收到哪些参数？ —— state：最新的数据 —— value：要操作的值 2.jia方法中的this是谁？—— Store实例对象（不常用，因为有了state） */ JIA(state,value){ console.log('mutations中的jia执行了',state,value) // 修改state state.sum += value } }, // 配置state的初始值 state:{ sum:1 } }) -
组件中修改vuex中的数据：
this.$store.dispatch('action中的方法名',数据)
8. 补全其他功能
-
把：减、奇数加、等一等加，用同样的套路完成。
-
具体代码：
-
在
src\store\index.js中// 该文件主要用于：创建并暴露一个store实例 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ actions:{ /* 1.jia方法何时用？—— 有人联系actions中的jia的时候 2.jia方法会收到哪些参数？ —— context（集装箱，放置着我们可能用到的各种东西，但现在只用commit） —— value（组件那边携带过来的数据） 2.jia方法中的this是谁？—— Store实例对象（不常用，因为有了context） */ jia({commit},value){ console.log('actions中的jia执行了',value) // 下面这行的含义是：联系mutations中的jia commit('JIA',value) }, // 专门用于完成减的action（服务员） jian({commit},value){ console.log('actions中的jian执行了',value) commit('JIAN',value) }, // 专门用于完成奇数再加的action（服务员） jijia({state,commit},value){ console.log('actions中的jijia执行了',value) if(state.sum % 2){ commit('JIA',value) } }, // 专门用于完成等一等再加的action（服务员） dengjia({commit},value){ setTimeout(() => { commit('JIA',value) }, 1000); } }, mutations:{ /* 1.jia方法何时用？—— 有人联系mutations中的jia的时候 2.jia方法会收到哪些参数？ —— state：最新的数据 —— value：要操作的值 2.jia方法中的this是谁？—— Store实例对象（不常用，因为有了state） */ JIA(state,value){ console.log('mutations中的jia执行了',state,value) // 修改state state.sum += value }, JIAN(state,value){ state.sum -= value } }, // 配置state的初始值 state:{ sum:1 } }) -
在
src\components\Count.vue中<template> <div class="count"> <!-- *****************8 --> <button @click="increment">+</button> <button @click="decrement">-</button> <button @click="incrementOdd">当前和为奇数再加</button> <button @click="incrementWait">等一等再加</button> </div> </template> <script> export default { name:'Count', data() { return { n:1, } }, methods: { // 点击【+】的回调 increment(){ //this.$store.dispatch('jia',this.n) //可以直接调用commit 连接mutations中的方法 this.$store.commit('JIA',this.n) }, // 点击【-】的回调 decrement(){ //this.$store.dispatch('jian',this.n) this.$store.commit('JIAN',this.n) }, // 点击【当前和为奇数再加】的回调 incrementOdd(){ this.$store.dispatch('jijia',this.n) }, // 点击【等一等再加】的回调 incrementWait(){ this.$store.dispatch('dengjia',this.n) } } } </script>
-
9. 有意义的 action
-
若没有网络请求，也没有其他业务逻辑，组件中可以越过
actions，直接联系mutations。具体写法：
this.$store.commit('mutations中的方法名',数据) -
若修改数据的过程中，存在网络请求，可以选择把网络请求交给
action，当然也可以不交给action。actions:{ fuwujia({commit}){ axios.get('https://api.uomg.com/api/rand.qinghua?format=json').then( response => { console.log(response.data.content) commit('JIA',response.data.content.length) }, error => { alert(error.message) } ) } }
day02
1. getters
-
概念：当
state中的数据，需要经过处理后再使用时，可以使用getters配置。 -
在
store.js中追加getters配置。/*********************/ // 创建一个store const store = new vuex.Store({ //..... getters:{ bigSum(state){ return state.sum * 10 }, upperAuthor(state){ return state.author.toUpperCase() } } }) //暴露store export default store -
组件中读取数据：
$store.getters.bigSum
2. mapState （重要）
用于帮助我们把state中的数据读出来，生成对应的计算属性（又称：映射state）
//......
computed: {
// 靠mapState批量生成所有的计算属性 —— 对象写法 对象中的key可加引号可不加引号
// ...mapState({'sum':'sum',version:'version'}),
// 靠mapState批量生成所有的计算属性 —— 数组写法
...mapState(['sum','version'])
原理：底层会生成 生成代码一下的结构
sum(){
return this.$store.state.sum
}
},
//.......
3. mapGetters（重要）
用于帮助我们把getters中的数据读出来，生成对应的计算属性（又称：映射getter）
//......
computed: {
// mapGetters的对象写法，略微麻烦一点，适用于：生成的计算属性名 和 getters中的数据 不同名
// ...mapGetters({bigSum:'bigSum','upperAuthor':'upperAuthor'})
// mapGetters的数组写法，最简单，适用于：生成的计算属性名 和 getters中的数据 同名
...mapGetters(['bigSum','upperAuthor'])
原理：底层会生成 生成代码一下的结构
bigSum(){
return this.$store.state.bigSum
}
},
//......
4. mapActions（了解）
用于帮助我们把actions中的方法读出来，生成对应的方法（又称：映射actions）
methods:{
// mapActions的对象写法
...mapActions({
incremenOdd:'jishuJia',
incrementWait:'dengJia',
incrementServer:'fuwuqiJia'
})
// mapActions的数组写法
...mapActions(['jishuJia','dengJia','jiaServer'])
原理：底层会生成 生成代码一下的结构
incremenOdd(){
this.$store.dispatch('jishuJia')
}
调用
<button @click="incremenOdd(传参时传递参数)">当前和为奇数再加</button>
}
5. mapMutations（了解）
用于帮助我们把mapMutations中的方法读出来，生成对应的方法（又称：映射mutations）
//....
methods:{
// 第一种写法
// ...mapMutations({increment:'JIA',decrement:'JIAN'}),
// 第二种写法
...mapMutations(['JIA','JIAN']),
原理：底层会生成 生成代码一下的结构
JIA(){
this.$store.commit('JIA')
}
调用
<button @click="JIA(传参时传递参数)">增加+</button>
}
//....
6. Vuex小案例
7. 模块化 + 命名空间 （新知识）modules
-
目的：将
state中的数据进行分类，且每个分类都对应一个.js文件。 -
创建
vuex中的user模块：src/store/modules/user.js，用于保存用户相关数据。// actions中的方法用于响应组件中的动作 —— 服务员 const actions = { addAge({state,commit},value){ if(state.age === 100){ alert('不能在加了') }else{ commit('ADD_AGE',value) } } } // mutations中的方法用于修改状态 —— 厨师 const mutations = { ADD_AGE(state,value){ state.age += value } } // state用于指定初始的数据 —— 原材料 const state = { name:'老段', age:18 } export default { namespaced:true, actions, mutations, state } -
创建
vuex中的home模块：src/store/modules/home.js，用于保存主页相关的数据；// actions中的方法用于响应组件中的动作 —— 服务员 const actions = { addA({state,commit},value){ if(state.a === 10){ alert('不能在加了') }else{ commit('ADD_A',value) } }, } // mutations中的方法用于修改状态 —— 厨师 const mutations = { ADD_A(state,value){ state.a += value } } // state用于指定初始的数据 —— 原材料 const state = { a:100, b:200 } export default { namespaced:true, actions, mutations, state } -
在
src/store/index.js中合并：home模块、user模块import Vue from 'vue' import Vuex,{Store} from 'vuex' import user from './modules/user' import home from './modules/home' Vue.use(Vuex) // actions中的方法用于响应组件中的动作 —— 服务员 const actions = {} // mutations中的方法用于修改状态 —— 厨师 const mutations = {} // state用于指定初始的数据 —— 原材料 const state = {} export default new Store({ actions, mutations, state, modules:{ user, home } }) -
组件中读取
state或getters，要这么写：...mapState(所属分类,[数据1,数据2])...mapState('user',['name','age']), ...mapState('home',['a','b']) -
组件中联系
actions或mutations，要这么写：this.$store.dispatch('所属分类/action名',数据)this.$store.dispatch('user/addAge',1) this.$store.dispatch('home/addA',1)