vuex
This commit is contained in:
parent
adf3c11262
commit
bfa918caa8
@ -12,7 +12,8 @@
|
||||
"core-js": "^3.6.5",
|
||||
"element-ui": "^2.15.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.5.1"
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
|
||||
@ -1,13 +1,44 @@
|
||||
import axios from './base.js'
|
||||
|
||||
export async function getlist(){
|
||||
let res = await axios.get("/findshop");
|
||||
let res = await axios.get("/findshop",{params:{a:1,b:3}});
|
||||
return res;
|
||||
}
|
||||
|
||||
export async function submit(data){
|
||||
let res = await axios.post("/addshop",data);
|
||||
return res;
|
||||
|
||||
// params get传参
|
||||
// axios({
|
||||
// url:"",
|
||||
// params:{
|
||||
|
||||
// },
|
||||
// headers:{
|
||||
|
||||
// }
|
||||
// })
|
||||
// axios.get("url", {
|
||||
// params:{
|
||||
|
||||
// },
|
||||
// headers:{
|
||||
|
||||
// }
|
||||
// })
|
||||
|
||||
// axios({
|
||||
// url:"",
|
||||
// method:"POST",
|
||||
// data:{},
|
||||
// headers:{}
|
||||
// })
|
||||
// axios.post('url',{data:'data'},{
|
||||
// headers:{
|
||||
|
||||
// }
|
||||
// })
|
||||
}
|
||||
export default {
|
||||
a:1,
|
||||
|
||||
16
src/components/shopitem.vue
Normal file
16
src/components/shopitem.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
{{name}} -- {{sex}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "shopitem.vue",
|
||||
props:["name","sex"]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
40
src/main.js
40
src/main.js
@ -7,9 +7,40 @@ import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.config.productionTip = false // 阻止生产提示
|
||||
Vue.use(ElementUI);
|
||||
// Vue.use(axios) axios 不支持use引入
|
||||
|
||||
|
||||
|
||||
import Vuex from "vuex"
|
||||
// state 全局的状态 全局的变量
|
||||
Vue.use(Vuex)
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
count: 50,
|
||||
list:[
|
||||
{
|
||||
name:"aaa",
|
||||
sex:"男"
|
||||
},{
|
||||
name:"bbb",
|
||||
sex:"男"
|
||||
},{
|
||||
name:"ccc",
|
||||
sex:"男"
|
||||
},{
|
||||
name:"ddd",
|
||||
sex:"男"
|
||||
},
|
||||
]
|
||||
},
|
||||
// 改变只能通过 mutations 不能直接赋值修改
|
||||
mutations: {
|
||||
setcount(state,num){
|
||||
console.log(state)
|
||||
state.count += num.name + num.age ;
|
||||
},
|
||||
addlist(state,info){
|
||||
state.list.push(info)
|
||||
alert("添加成功")
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
@ -38,7 +69,8 @@ Vue.prototype.globaldata = {}
|
||||
// vuex
|
||||
new Vue({
|
||||
render: h => h(App), // 渲染 传入的组件 根组件
|
||||
router: router //挂载router
|
||||
router: router, //挂载router
|
||||
store: store //挂载store
|
||||
}).$mount('#app')
|
||||
// 链式操作 vue3 $
|
||||
|
||||
|
||||
33
src/pages/addlist.vue
Normal file
33
src/pages/addlist.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<input type="text" v-model="name" />
|
||||
<input type="text" v-model="sex" />
|
||||
<button @click="add">添加</button>
|
||||
<button @click="navto">到列表页</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "addlist.vue",
|
||||
data(){
|
||||
return {
|
||||
name:"",
|
||||
sex:"",
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add(){
|
||||
this.$store.commit("addlist",{name: this.name,sex:this.sex})
|
||||
},
|
||||
navto(){
|
||||
this.$router.push("/list")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
42
src/pages/list.vue
Normal file
42
src/pages/list.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <div v-for="(item,index) in list" :key="index">-->
|
||||
<!-- <span>姓名:{{item.name}}</span>-->
|
||||
<!-- <span>性别:{{item.sex}}</span>-->
|
||||
<!-- </div>-->
|
||||
<shopitem v-for="(item,index) in list" :key="index" :name="item.name" :sex="item.sex"></shopitem>
|
||||
<!-- <div>-->
|
||||
<!-- <input type="text" v-model="name" />-->
|
||||
<!-- <input type="text" v-model="sex" />-->
|
||||
<!-- <button @click="add">添加</button>-->
|
||||
<!-- </div>-->
|
||||
<button @click="navto">到其他页面添加</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shopitem from "../components/shopitem.vue"
|
||||
export default {
|
||||
name: "list.vue",
|
||||
components:{
|
||||
shopitem
|
||||
},
|
||||
methods:{
|
||||
// add(){
|
||||
// this.$store.commit("addlist",{name: this.name,sex:this.sex})
|
||||
// },
|
||||
navto(){
|
||||
this.$router.push("/addlist")
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
list(){
|
||||
return this.$store.state.list
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -10,7 +10,8 @@ const routes = [
|
||||
{ path: '/a/b/c/d', name: "user", component: user,meta:"admin" },
|
||||
{ path: '/axios', name: "user", component: axios,meta:"admin" },
|
||||
{ path: '/login', name: "user", component: ()=>import("../views/login.vue"),meta:"user" },
|
||||
{ path: '/list', name: "user", component: ()=> import("../views/list.vue"),meta:"admin" },
|
||||
{ path: '/list', name: "user", component: ()=> import("../pages/list.vue"),meta:"admin" },
|
||||
{ path: '/addlist', name: "user", component: ()=> import("../pages/addlist.vue"),meta:"admin" },
|
||||
{
|
||||
path: "/admin",meta:"admin", beforeEnter: (to, from, next) => {
|
||||
// ...
|
||||
|
||||
@ -21,6 +21,10 @@
|
||||
<div>
|
||||
<router-link :to='{name:"user"}'>点我跳转user</router-link>
|
||||
</div>
|
||||
<div>{{count}}</div>
|
||||
<div>{{fcount()}}</div>
|
||||
<div>{{$store.state.count}}</div>
|
||||
<button @click="setcount">修改count</button>
|
||||
<admin></admin>
|
||||
<el-button>默认按钮</el-button>
|
||||
<el-button type="primary" :plain="true" :circle="true" @click="aaa">信息按钮</el-button>
|
||||
@ -51,13 +55,39 @@ export default {
|
||||
bbb(a,b){
|
||||
console.log(a,b)
|
||||
this.$router.push(a)
|
||||
}
|
||||
},
|
||||
fcount(){
|
||||
return this.$store.state.count
|
||||
},
|
||||
setcount(){
|
||||
// this.$store.state.count += 50; // 可以修改 但是官方不推荐
|
||||
// this.$store.mutations.setcount() 不是这样调用
|
||||
// 只能传递一个参数对象 不能像 $emit 可以同时传多个
|
||||
// 如果同时要加入多个 可以传递对象
|
||||
this.$store.commit("setcount",{name:1,age:2}) // this.$emit
|
||||
|
||||
|
||||
|
||||
// commit
|
||||
/**
|
||||
* 两个参数 第一个参数 方法名 vuex里面的mutations 下面的名字 用字符串
|
||||
* 第二个参数 传递的值 只能有一个 多个用对象
|
||||
* 他会帮我们调用mutations 同名的方法 默认传递 state 全局的状态(变量)
|
||||
* 第二个参数 commit 会帮助我们传到方法的第二个参数
|
||||
*/
|
||||
}
|
||||
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
count(){
|
||||
return this.$store.state.count
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
这是用户的页面组件
|
||||
<p>{{$store.state.count}}</p>
|
||||
<button @click="setcount">修改count</button>
|
||||
|
||||
<div>
|
||||
<router-link to="/admin">到admin</router-link>
|
||||
</div>
|
||||
@ -13,6 +16,14 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
methods:{
|
||||
setcount(){
|
||||
// this.$store.state.count += 50; // 可以修改 但是官方不推荐
|
||||
// this.$store.mutations.setcount() 不是这样调用
|
||||
// 只能传递一个参数对象 不能像 $emit 可以同时传多个
|
||||
// 如果同时要加入多个 可以传递对象
|
||||
this.$store.commit("setcount",{name:1,age:2}) // this.$emit
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -8279,6 +8279,11 @@ vue@^2.6.11:
|
||||
resolved "https://registry.nlark.com/vue/download/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
|
||||
integrity sha1-9evU+mvShpQD4pqJau1JBEVskSM=
|
||||
|
||||
vuex@^3.6.2:
|
||||
version "3.6.2"
|
||||
resolved "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz?cache=0&sync_timestamp=1621868918134&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvuex%2Fdownload%2Fvuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
|
||||
integrity sha1-I2vAhqhww655lG8QfxbeWdWJXnE=
|
||||
|
||||
watchpack-chokidar2@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.npm.taobao.org/watchpack-chokidar2/download/watchpack-chokidar2-2.0.1.tgz?cache=0&sync_timestamp=1604989063099&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack-chokidar2%2Fdownload%2Fwatchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user