vue2-Vuex总结

vue2-Vuex总结

一、 vuex安装

1. 自己安装

npm i vuex@3.4.0  -S

2. 脚手架安装

  • 脚手架安装就是直接勾选即可。

二、vuex的使用

1. 使用第一种方式安装

需要如下操作

  • src文件夹下面创建一个文件夹 store,在里面创建一个index.js ,在里面书写如下代码
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store=new Vuex.Store({
    
    // 这里面定义状态,也就是数据
    state:{
        counter:0,
        myname:'zrs'
	},
    
    // 在这里书写方法,改变state
    mutations:{
        // state 表示的就是上文中的state
        // payload 叫做载荷,是触发该函数的时候,提交的参数
        add(state,payload){
            state.counter++
		},
        minus(state,payload){
            state.counter--
		}
	},
    
    // 这里面书写的方法是来触发 mutations 里面的方法的
    actions:{
        // context 表示的是整个 store 
        // 一般写法
        // onAdd(context,payload){
            // context.commit('add')
        // }
        
        // 直接再参数中,将 commit 解构出来
        onAdd({commit},payload){
            commit('add')
        }
    },
    
    // 类似于组件中的计算属性,用来加工 store 中的 state 里面的属性值
    getters:{
        // state 就是最上面的 state 对象
        // getters 就是整个 getters 对象
        getCounter(state,getters){
            return state.counter
		}
	}
})

export default store

2. 使用第二种方式安装

脚手架直接创建文件夹,然后创建了index.js,所以直接书写代码即可。

三、简单说一下 vuex 的执行流程

在这里插入图片描述

组件通过 dispatch 方法触发 actions 里面的动作,通过actions里面的函数触发 mutations里面的函数修改state里面的值,然后在渲染最新值到页面中。

备注:之后在 mutations 里面修改值,才能被监听。

四、辅助函数

辅助函数就是将 store 里面的方法 状态映射到对应的组件中,这样的写法就很简单了。

1. 在computed中映射 state 和 getters

使用辅助函数需要引入:

1-1. 属性名和属性值不一样
<template>
    <h1>
        {{myCounter}}
    </h1>
    
    <p>
        {{newValue}}
    </p>
</template>
<script>
    
import {mapSate,MapGetters}   from 'vuex'
export default {
// 这里面映射出来的状态,和组件自己的状态的使用方式一样
        computed:{
        ...mapState({
			// 属性名(组件中使用的名字):属性值( store 中的 state名称)
            myCounter:'counter'
        }) 
        ...mapGetters({
			//  属性名(组件中使用的名字):属性值( store 中的 getters 中的函数名)
            newValue:'counters'
        }) 
    }
}
</script>
1-2. 属性名和属性值一样的时候,可以简写为数组
<template>
    <h1>
        {{counter}}
    </h1>
    
    <p>
        {{counters}}
    </p>
</template>
<script>
    
import {mapSate,MapGetters}   from 'vuex'
export default {
// 这里面映射出来的状态,和组件自己的状态的使用方式一样
	computed:{
        // 上文中的属性名和属性值一样的时候,可以简写为数组
        ...mapState(['counter']) // 一般不使用
        
        ...mapGetters(['counters']) 
	}
}
</script>
2. 在methods中映射 mutations 和 actions

使用辅助函数需要引入:

1-1. 属性名和属性值不一样的时候
<script>
import {mapMutations,mapActions} from 'vuex'
export default {
    // 在其他地方调用映射的函数
    created(){
        this.onplus()
        this.setPlus()
    },
// 这里面映射出来的方法,和methods的方法调用一样
    methods:{
        ...mapMutations({
            // 属性名(在组件中使用):属性值(在store中的 mutations 里面的函数名)
            onPlus:'plus'
        }) 
        
        ...mapActions({
        	setPlus:'setplus1'
   		})
    }
}
</script>

1-2. 属性名和属性值一样的时候,可以简写为数组
<script>
import {mapMutations,mapActions} from 'vuex'
export default {
    // 在其他地方调用映射的函数
    created(){
        this.plus()
        this.setplus1()
    },
// 这里面映射出来的方法,和methods的方法调用一样   
    methods:{
        ...mapMutations(['plus']) // 一般不使用
        ...mapActions(['setplus1'])
    }
}
</script>

五、store 模块化

1. user 模块:

在 store 文件夹下新建一个 modules 文件夹,在里面创建一个 user.js 文件

// 
// 模块User
const User={
    state:{
        uname:'zrs',
        age:20
    },
    mutations:{
        changeName(state){
            state.uname='zzr'
        } 
    },
    actions:{
        onChangeName(context){
            context.commit("changeName")
		}
	},
    getters:{
        
    }
}

export default User
2. product 模块:

在 store 文件夹下新建一个 modules 文件夹,在里面创建一个 product.js 文件


// 模块Product
const Product={
    state:{
        hotList:[],
       	cratList:[],
        num:0
    },
    mutations:{
        onHotList(state,list){
            state.hotList=list
		}
    },
    actions:{
        setHotList({commit}){
            commit("onHotList",['aaa','ddd','cccc'])
		}
	},
    getters:{
        
    }
}

export default Product
3. 使用模块化:

将以上两个文件读入,书写在对应的位置

import Vue from 'vue'

import Vuex from 'vuex'

import user from './modules/user.js'
import product from './modules/product.jss'

const store= new  Vuex.Store({
    
    // 模块化在这里书写
    modules:{
        user,
        product
    }
})
4. 模块化之后在 组件中使用 state

备注:在没有使用命名空间的情况下,在组件中的script标签中使用getters,actions,mutations的方式没有改变。辅助函数的使用方式也没有改变。


<p>
    {{$store.state.user.uname}}
</p>

<p>
    {{$store.state.product.num}}
</p>
5. 简单模拟一下,合并之后的样子:

合并之后,只有state是装在对应的模块中,其他都是简单的合并,如果多个模块中有重名的函数,那么对应的就会成为一个数组,触发重名函数的时候,每个函数都会执行,难以排错,所以在vuex模块化的时候,一定要有重名函数。如果要有重名函数的话,那么就要使用 命名空间了,在对应模块中添加 namespaced : true 这样就会导致在使用辅助函数,组件中使用dispatch方法的时候,也需要改变。

import Vue from 'vue'

import Vuex from 'vuex'

import user from './modules/user.js'
import product from './modules/product.jss'

const store= new  Vuex.Store({
    
    // 模块化之后的 state
    state:{
        user:{
            uname:'zrs',
        	age:20
        },
        product:{
            hotList:[],
            cratList:[],
            num:0
        }
    },

    mutations:{
        onHotList(state,list){
            state.hotList=list
		},
        changeName(state){
            state.uname='zzr'
        }
    },
    
    actions:{
        setHotList({commit}){
            commit("onHotList",['aaa','ddd','cccc'])
		},
        onChangeName(context){
            context.commit("changeName")
		}
	},
    
    getters:{
        
    }
})
6. 使用命名空间之后的辅助函数使用方式,和访问actions,mutations,getters里面的函数的方式
// 未完待续

六、本地化存储

1. 安装插件

使用 vuex-persistedstate 插件

npm install vuex-persistedstate --save

2. 默认配置

在 store 的 index.js 中,手动引入插件并配置。

import createPersistedState from "vuex-persistedstate"

const store = new Vuex.Store({

  // 这里展示的是默认配置,也可以有其他配置后面再讲
  plugins: [createPersistedState()]
    
})

3. 其他配置

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      // storage 配置持久化储存方式
         storage: window.localStorage
      
      // 这里配置持久化储存的另一种方式 sessionStorage
      //  storage: window.sessionStorage,

      key:'键名'  // 看实际效果,可以去控制台的 localStorage 里面查看
      
  })]
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值