Vue特点
- 集中式存储管理应用的所有组件的状态
- 保证状态以一种可预测的方式发生变化
- 简化Vue组件间通讯
Vuex的安装与使用
在vue之后引入vuex会自动安装
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
npm安装
npm i vuex@3.4.0 --save
安装 Vuex 之后,让我们来创建一个 store
import Vuex from 'vuex'
vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
})
Vuex 的核心概念
State
获取状态对象
Mutations
更改 Vuex 的 store 中的状态
mutations: {
PLUS (state) {
state.count++ // 变更状态
}
}
Actions
提供给外部组件调用,actions内使用commit触发执行mutations中的方法
Getters
Getter 接受 state 作为其第一个参数
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
Vuex辅助函数 map系列
在组件中使用
import {mapGetters,mapActions} from 'vuex'
mapGetters 辅助函数
---- mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
//在组件中获取 state 数据,在 computed 计算属性中使用,如果你想将一个 getter 属 性另取一个名字,使用对象形式
...mapGetters[{
doneCount: 'doneTodosCount'
//doneCount :计算名
//doneTodosCount:方法名
}]
//当计算名和方法名相同时可以简写
//...mapGetters['doneTodosCount']
mapActions 辅助函数
---- 在数组中操作 vuexStore 中的 action 方法
methods:{
...mapActions[{
onPlus: 'onPlus' //'onPlus':actions方法名
}]
// 名称与值相同时可简写为 'onPlus'
}
//等价于
onPlus(){
this.$store.dispatch("onPlus")
}
Vuex - persistedstate 插件
安装
npm i vuex-persistedstate --save
引入及配置
在store下的index.js文件中配置:
import createPersistedState from 'vuex-persistedstate'
plugins: [createPersistedState]
默认存储到 localStorage 中,想要存储到 sessionStorage 中,配置如下:
plugins: [createPersistedState({
storage:Window.seessionStorage,
key:'store'
})]