1. The following problems occur when the project is running:
2. I checked it myself as if the attribute did not declare
3 in vue. The code is as follows
(1) card.vue
<script>
import { actions } from "../store";
export default {
vuex: {
actions: actions,
getters: {
user: ({ user }) => user,
filterKey: ({ filterKey }) => filterKey
}
},
methods: {
onKeyup (e) {
this.search(e.target.value);
}
}
};
</script>
<template>
<div class="card">
<header>
<img class="avatar" width="40" height="40" :alt="user.name" :src="user.img">
<p class="name">{{user.name}}
</header>
<footer>
<input class="search" type="text" placeholder="search user..." <!--@keyup="onKeyup | debounce 150"-->>
</footer>
</div>
</template>
<style scoped lang="less">
.card {
padding: 12px;
border-bottom: solid 1px -sharp24272C;
footer {
margin-top: 10px;
}
.avatar, .name {
vertical-align: middle;
}
.avatar {
border-radius: 2px;
}
.name {
display: inline-block;
margin: 0 0 0 15px;
font-size: 16px;
}
.search {
padding: 0 10px;
width: 100%;
font-size: 12px;
color: -sharpfff;
height: 30px;
line-height: 30px;
border: solid 1px -sharp3a3a3a;
border-radius: 4px;
outline: none;
background-color: -sharp26292E;
}
}
</style>(2) store.js
/**
* Vuex
* http://vuex.vuejs.org/zh-cn/intro.html
*/
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const now = new Date();
const store = new Vuex.Store({
state: {
//
user: {
name: "coffce",
img: "./images/1.jpg"
},
//
sessions: [
{
id: 1,
user: {
name: "",
img: "./images/2.png"
},
messages: [
{
content: "HelloVue + Vuex + WebpackchatlocalStorge, Github Issue",
date: now
}, {
content: ": https://github.com/coffcer/vue-chat",
date: now
}
]
},
{
id: 2,
user: {
name: "webpack",
img: "./images/3.jpg"
},
messages: []
}
],
//
currentSessionId: 1,
// key
filterKey: ""
},
mutations: {
INIT_DATA (state) {
let data = localStorage.getItem("vue-chat-session");
if (data) {
state.sessions = JSON.parse(data);
}
},
//
SEND_MESSAGE ({ sessions, currentSessionId }, content) {
let session = sessions.find(item => item.id === currentSessionId);
session.messages.push({
content: content,
date: new Date(),
self: true
});
},
//
SELECT_SESSION (state, id) {
state.currentSessionId = id;
} ,
//
SET_FILTER_KEY (state, value) {
state.filterKey = value;
}
}
});
store.watch(
(state) => state.sessions,
(val) => {
console.log("CHANGE: ", val);
localStorage.setItem("vue-chat-session", JSON.stringify(val));
},
{
deep: true
}
);
export default store;
export const actions = {
initData: ({ dispatch }) => dispatch("INIT_DATA"),
sendMessage: ({ dispatch }, content) => dispatch("SEND_MESSAGE", content),
selectSession: ({ dispatch }, id) => dispatch("SELECT_SESSION", id),
search: ({ dispatch }, value) => dispatch("SET_FILTER_KEY", value)
};
attributes user and name? For advice, thank you