使用vuex
来实现组件通信
一、vuex
的安装与使用
- 安装
npm install vuex -S
- 使用
// main.js
import Vue from 'vue'
// 1. 导入 vuex 包
import Vuex from 'vuex'
// 2. 注册 vuex 到 vue 中
Vue.use(Vuex)
// 3. new Vuex.Store() 实例,得到一个 数据仓储对象
var store = new Vuex.Store({
state: {...},
mutations: {},
getters: {}
})
import App from './App.vue'
const vm = new Vue({
el: '#app',
render: c => c(App),
store // 5. 将 vuex 创建的 store 挂载到 VM 实例上, 只要挂载到了 vm 上,任何组件都能使用 store 来存取数据
})
二、 vuex
的具体分析
-
state
对象:类似于组件中的data
,专门用来存储数据。在组件中,若要访问store
中的数据,只能通过this.$store.state.xxx
来访问
// main.js 中
var store = new Vuex.Store({
state: {
count: 0
},
mutations: {},
getters: {}
})
// B.vue中
<span> {{$store.state.count}} </span>
-
mutations
对象:若要操作store
中的state
值,只能通过调用mutations
提供的方法,才能操作对应的数据,步推荐直接操作state
中的数据,因为万一导致了数据的紊乱,不能快速定位到错误的原因,因为每个组件都有可能有操作数据的方法。
若子组件想要调用mutations
中的方法,只能使用this.$store.commit('方法名')
,这种调用mutations
方法的格式和this.$emit('父组件中的方法名')
类似
注意:mutations
的 函数参数列表中,最多支持两个参数,其中,参数1: 是state
状态; 参数2: 通过commit
提交过来的参数(若要传多个参数,则用对象的方式传入);
// main.js 中
var store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
},
subtract(state, obj) {
console.log(obj)
state.count -= (obj.c + obj.d)
}
},
getters: {}
})
// B.vue中
<template>
<div>
<input type="button" value="减少" @click="remove">
<input type="button" value="增加" @click="add">
<br>
<input type="text" v-model="$store.state.count">
</div>
</template>
<script>
export default {
methods: {
add() {
// 千万不要这么用,不符合 vuex 的设计理念
// this.$store.state.count++;
this.$store.commit("increment");
},
remove() {
this.$store.commit("subtract", { c: 3, d: 1 });
}
}
}
-
getter
对象:里面的值永远是 函数形式 的,函数接收的第一个值 永远是state
。
这里的getters
, 只负责 对外提供数据,不负责 修改数据,如果想要修改state
中的数据,请 去找mutations
。
发现getters
中的方法, 和组件中的过滤器比较类似,因为 过滤器和getters
都没有修改原数据, 都是把原数据做了一层包装,提供给了 调用者;
其次,getters
也和computed
比较像, 只要state
中的数据发生变化了,那么,如果getters
正好也引用了这个数据,那么 就会立即触发getters
的重新求值
// main.js 中
var store = new Vuex.Store({
state: {
count: 0
},
mutations: { },
getters: {
optCount: function (state) {
return '当前最新的count值是:' + state.count
}
}
})
// C.vue 中
<h3>{{ $store.getters.optCount }}</h3>
三、 Vuex
与localStorage
-
vuex
是vue
的状态管理器,存储的数据是响应式的。但是并不会保存起来,刷新之后就回到了初始状态,具体做法应该在vuex
里数据改变的时候把数据拷贝一份保存到localStorage
里面,刷新之后,如果localStorage
里有保存的数据,取出来再替换store
里的state
// main.js 中
// 每次刚进入 网站,肯定会 调用 main.js 在刚调用的时候,先从本地存储中,把 count 的数据读出来,放到 store 中
var count = JSON.parse(localStorage.getItem('count') || '0')
var store = new Vuex.Store({
state: {
count:count
},
mutations: {
increment(state) {
state.count++
// 当 更新 count 之后,把 count 存储到 本地的 localStorage 中
localStorage.setItem('count', JSON.stringify(state.count))
},
subtract(state, obj) {
console.log(obj)
state.count -= (obj.c + obj.d)
localStorage.setItem('count', JSON.stringify(state.count))
}
},
getters: {}
})
- 这里需要注意的是:由于
vuex
里,我们保存的状态,都是数字,而localStorage
只支持字符串,所以需要用JSON
转换:
JSON.stringify(state.subscribeList); // array -> string
JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array
网友评论