使用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
网友评论