pwdIcon.value = “iconfont duihao”;
} else {
pwdIcon.value = “iconfont chahao”;
}
}
);
function rightClick() {
// console.log(1);
store.commit(“changeBackColor”);
}
return {
rightClick,
disabled,
mobile,
pwd,
mobileIcon,
pwdIcon,
color,
};
},
};
vuex store/index.js
import { createStore } from ‘vuex’
import axios from ‘axios’
export default createStore({
state: {
// 默认颜色
backColor: ‘#cccccc’,
// 存放数据,页面默认渲染的数据
books: [],
// 用于搜索
_books: [],
},
mutations: {
changeBackColor(state) {
state.backColor = ‘#’ + Math.round(Math.random() * 16777216).toString(16)
},
changeBooks(state, arr) {
state.books = arr
state._books = deepClone(arr)
function deepClone(obj) {
if (typeof obj !== ‘object’ || obj == null) {
return obj
}
let result
if (obj instanceof Array) {
result = []
} else {
result = {}
}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key])
}
}
return result
}
},
},
actions: {
async getDate({ commit }) {
//将请求的数据中的 list取出来
let data = await axios.get(‘/goods.json’)
console.log(data.data.list);
commit(‘changeBooks’, data.data.list)
}
},
modules: {}
})
登录子组件
{{leftText}}{{title}}<span class=“right” @click=“clickEve”>{{rightText}}
<input type=“text” :placeholder=“placeholder” :value=“modelValue” @input=“iptChange”>
登录后页面