一、以前写的demo
Vue-cli:4.2.3
demo地址:https://gitee.com/animalcoder/Vue
效果:维护监听List的内容(title,content ),显示到页面Son1 中,Son2 点提交,添加List
实现思路:
引入Vuex 依赖
npm install xxxx -save ,import..........
新建store.js :
state:声明变量List (存标题与内容); mutations:声明增加方法Add()
Son2.Vue :
data:声明变量title,content ;
声明方法X(),X()里面调用store.js的增加方法Add(),将title,content数据插入List;
html的<input>用v-model双向绑定title content;
提交按钮绑定调用方法X();
Son1.Vue:
computed:动态监听List :新建方法 pageLists()返回store.js里面的List ;利用<li v-for> 显示
...
<li v-for="(item,idx) in pageLists" :key="idx" style="color:black;">
...
</li>
...
import store from "@/store"; //取出存储器里面的lists
export default {
name: "List",
store,
computed: {
//动态监听变化
pageLists: () => store.state.lists
},
...
}
补上localStorage,使得关闭浏览器也能有数据
注意List 的localStorage存储方式
取:xxx=JSON.parse(localStorage.getItem("list1"))
存:localStorage.setItem("list1",JSON.stringify(state.lists))
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let defaultlist=[]
try {//
if(localStorage.getItem("list1")){
defaultlist=JSON.parse(localStorage.getItem("list1"))
}
}catch(e){
}
export default new Vuex.Store({
state:{//状态
lists:defaultlist
},
mutations: { //更改事件
addItems (state , value){
state.lists.push(value)
localStorage.setItem("list1",JSON.stringify(state.lists))
}
},
actions: {
}
})
二、试试分模块的vuex
效果:
index.js是总的vuex,user.js是子模块
index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import user from './modules/user'
const store= new Vuex.Store({
modules: {
user:user
},
})
export default store //暴露变量到其他文件
user.js
const user={
state:{
username:'',
},
mutations:{
SET_NAME:(state,name)=>{
console.log("user set name"+name)
state.username=name;
}
},
getters:{
name: state => state.user.name,
}
}
export default user
在Test.vue使用vuex
注意,只有state才是分模块,commit的函数都是总的(不同模块的函数名不能重复),所以不能写成store.xxx.commit
直接store.commit
访问user的state的变量:store.state.user.username
<template>
<div class="test">
<input type='text' v-model="input1"/>
<el-button @click="summit()">提交</el-button>
<p>gogogo{{title}}</p>
</div>
</template>
<script>
import store from '../store/index' //引入总vuex
export default {
store,
data() {
return {
title: "",
input1:"",
};
},
methods: {
summit(){
store.commit("SET_NAME",this.input1)
this.title = store.state.user.username;
}
},
};
</script>
三、action初探
众所周知,变更状态的方法都写在mutations中
actions 提交的是 mutations,而不是直接变更状态。
actions 的用处是可以包含任意异步操作。
action的参数解构:
actions里的xxx({commit},参数)看不懂系列
mutations: {
increment1 (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment1')
}
}
等价于
actions: {
increment ({ commit }) {
commit('increment1')
}
}
四、试试异步调用actions里的函数
在其他.vue
使用this.$store.dispatch('actions方法名',actions方法名的参数)
异步调用actions中的方法
.then()代表异步成功调用后才执行的逻辑
.catch()代表异步失败调用后才执行的逻辑
methods: {
getFuck() {},
summit(){
//store.commit("SET_NAME",this.input1) 同步调用
//异步调用
this.$store
.dispatch('Login', this.input1)
.then(() => {
console.log("Login succ!")
this.title = store.state.user.username;
//this.$router.push({ path: "/" });
})
.catch((error) => {
console.log("???"+error)
});
//异步调用的过程中,会先调用下面的语句
console.log("end")
}
},
在actions声明Login方法,axios.get()异步调用后端接口
代码解释:Login返回Promise对象,
if(成功){ 使用resolve(xxx)} 会返回到前面dispatch的.then()中, 这个xxx就是前面dispatch.then((xxx)=>{...})的xxx
if(失败{ 使用reject(xxx)} 会返回到前面dispatch的.catch()中,这个xxx就是前面dispatch.catch((xxx)=>{...})的xxx
当然,我们还要commit mutations中的方法来改变vuex中的状态,因为不要忘了actions 本身提交的是 mutations
actions:{//用于$store.dispatch异步调用
Login({ commit }, username) { //login返回一个Promise对象
return new Promise((resolve, reject) => {//将登录axios异步处理,否则会拿不到数据
axios.get('http://localhost:12177/login',{params:{'username':username}}).then(res => {//异步处理login后回调逻辑,更新姓名
let res1=JSON.stringify(res.data)//对象转为json
console.log("res="+res1)
res1=JSON.parse(res1)//json串转为对象
commit('SET_NAME', res1.data)//SET_TIME 是mutations中的方法
resolve() //表示promise已完成 resolve()中可加参数X代表Login成功的返回X
})
.catch(error => { //异常处理
console.log("error:"+error)
reject(error)
})
})
},
}