今天完成的事情：
1.进行vuex的学习，知道了vuex是首先安装vuex依赖，使得可以在这个项目中使用，然后最初是在项目的store.js文件里写vuex相应的代码：
store.js：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
//state里面只放置全局需要共用的属性
state: {
count: 0,
login: null
},
//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，此时里面的必须是同步函数
mutations: {
addCount(state) {
state.count++
},
login(state,user){
if(user) {
state.login=user;
}
}
},
//Action 提交的是 mutation，而不是直接变更状态。并且Action 可以包含任意异步操作。
actions: {
},
//Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样
//getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
getters: {
getname(state) {
return state.login ? state.login : "未登录";
}
}
});
此时因为安装的vuex依赖，已经自动在main.js里面添加相应的store，如果是自己写的其他vuex文件，则要引入相应的名称：
main.js：
import store from './store';
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
在组件里引用的话，需要使用$store这样来引用，在js里则是用this.$store.commit（）等方法：
<template>
<h1>{{$store.state.count}}</h1>
<h1>{{$store.getters.getname}}</h1>
<input type="button" value="jia1" @click="vueadd">
<input type="button" value="dengkl" @click="log">
</template>
<script>
methods: {
log(){
this.$store.commit("login","李白");
},
vueadd (){
this.$store.commit("addCount")
},
</script>
然后后面还有进行模块化，类似于把一个整体的vuex进行组件化，使用import分别放在不同的文件里。
明天计划：
看看怎么能把这个用在编辑里，是不是还需要把原来接收后台数据的对象修改一下，变成全局的。
返回列表
评论