vuex
一.认识
为什么要用vuex,父子组件之间的传递原来使用emit,props等方法,vuex相当于一个全局存储,所有组件都可以从中拿数据
二.配置
1.整体配置
-
下载(注意vue2对应vuex3版本,vue3对应vuex4)
npm i vuex --save/-S
-
src目录下新建store文件夹,文件夹下新建index.js
import Vuex from 'vuex' import Vue from 'vue' // 使用安装 Vue.use(Vuex) // 初始化 const store = new Vuex.Store({ // 配置(state|mutations|actions) }) export default store
-
main.js中引用
import store from '@/store' new Vue({ // 把store对象挂载到vue实例对象中,这样就可以在所有的组件中获取store中的数据了 store, render: h => h(App), }).$mount('#app')
2.state存储数据
-
存储数据(store下index.js)
// 初始化vuex对象 const store = new vuex.Store({ state: { // 管理数据 count: 0, count1: 1, } })
-
组件中使用:
2.1原始使用插值表达式
<div>A组件 state的数据:{{$store.state.count}}</div>
2.2使用计算属性(基础)
<div>A组件 state的数据:{{count}}</div>
// 把state中数据,定义在组件内的计算属性中 computed: { // 1. 最完整的写法 // count: function () { // return this.$store.state.count // }, // 2. 缩写 count () { return this.$store.state.count } }
2.3使用计算属性(mapState对象)注意:在mapState中不用this.$store,写法略有不同
<div>A组件 state的数据:{{count}}</div>
import {mapState} from 'vuex' //computed在data同级 computed: mapState({ //1. 基础写法 (state) 代表就是vuex申明的state count: function(state) { return state.count } //2. 使用箭头函数 count: state => state.count //3. vuex提供写法 ('count'是state中的字段名称) count: 'count', //4. 当你的计算属性 需要依赖vuex中的数据 同时 依赖组件中data的数据 count (state) { return state.count + this.num } })
另一种写法,'count'为store中的
computed:{ ...mapState({ count: 'count' }) }
2.4使用计算属性(mapState数组)
//这种写法是state中定义的数据和组件中引用的名称一样,template中直接{{count}}引用即可,在methods直接this.count即可 computed:{ ...mapState(['count','count1']) }
3.mutations修改状态
-
修改函数(store下index.js)
// mutations是固定的,用于定义修改数据的动作(函数) mutations: { // 定义一个mutation,用于累加count值 // increment这个名字是自定义的 increment (state, payload) { // state表示Store中所有数据 // payload表示组件中传递过来的数据 state.count = state.count + payload }, decrement (state, payload) { state.count = state.count - payload } }
-
组件中调用(基础)
//需要调用commit方法,用来触发store中的mutations下的函数 <template> <div class="hello"> <p>测试区1:{{$store.state.count}}</p> <p>测试区2:{{count}}</p> <button @click="handclick1">+2</button> <button @click="handclick2">-1</button> </div> </template> <script> import {mapState} from 'vuex' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, computed:mapState({ count:function(state){ return state.count +2 } }), methods:{ handclick1(){ this.$store.commit('increment',2) }, handclick2(){ this.$store.commit('decrement',2) } } } </script>
-
组件中调用(mapMutations)
<template> <div class="hello"> <p>测试区1:{{$store.state.count}}</p> <p>测试区2:{{count}}</p> <button @click="handclick1">+2</button> <button @click="handclick2">-1</button> </div> </template> <script> import {mapState,mapMutations} from 'vuex' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, computed:mapState({ count:function(state){ return state.count +2 } }), methods:{ handclick1(){ this.decrement(2) //注意此处写法,一旦使用mapMutations,就相当于把方法映射到组件中,直接用this调用即可 }, handclick2(){ this.increment(2) }, ...mapMutations(['increment','decrement']) //'increment'为store中mutations中方法 } } </script>
4.异步操作action
-
修改函数(store下index.js)
导入: npm i axios
import Vuex from 'vuex' import Vue from 'vue' import axios from 'axios' // 使用安装 Vue.use(Vuex) // 初始化 const store = new Vuex.Store({ // 配置(state|mutations|actions) state:{ count:0, list:[] }, mutations:{ updateList(state,payload){ state.list = payload } }, actions:{ async querydata(context,payload){ const ret = await axios.get("http://x") //commit用来触发mutations中对应的函数 context.commit('updateList',ret.data.list) } } }) export default store
-
组件中使用(基础)
methods: { handleQuery () { // 触发action(必须调用dispatch方法) this.$store.dispatch('queryData', 111) } }
-
组件中使用(mapActions)
<template> <div class="hello"> <p>测试区1:{{$store.state.count}}</p> <p>测试区2:{{count}}</p> <button @click="qu">+2</button> </div> </template> <script> import {mapState,mapMutations} from 'vuex' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, computed:mapState({ count:function(state){ return state.count +2 } }), methods:{ qu(){ this.queryData(2) } ...mapActions(['queryData']) //将store中mapactions中对应的方法映射到组件中 } } </script>
5.getters用法
-
定义getters(store下index.js)
// 相当于state的计算属性(基于State处理成另外一份数据) // getters的主要应用场景:模板中需要的数据和State中的数据不完全一样 // 需要基于state中的数据进行加工处理,形成一份新的的数据,给模板使用 import Vuex from 'vuex' import Vue from 'vue' // 使用安装 Vue.use(Vuex) // 初始化 const store = new Vuex.Store({ // 配置(state|mutations|actions) state:{ count:0, list:[0,1,2,3,4,5,6,7,8] }, getters:{ getParlist(state){ return state.list.filter(item=>{ return item > 1 }) } } }) export default store
-
组件中调用(基础)
caleList () { // 注意:获取getters的值,不需要加括号(当属性使用) return this.$store.getters.getPartList },
-
组件中调用(mapgetters)
import { mapGetters } from 'vuex' // mapGetters的作用:把getters映射为计算属性 computed: { ...mapGetters(['getPartList']),//template中调用,{{getPartList}} // ...mapGetters({ //下面两种调用,{{calcList}} // calcList: 'getPartList' // }), // calcList () { // // 注意:获取getters的值,不需要加括号(当属性使用) // return this.$store.getters.getPartList // }, }