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 里面查看
      
  })]
})