一 创建测试项目
vue init webpack-simple vuedemo
二 进入demo目录
cd vuedemo
三 安装依赖
cnpm install
四 安装vuex
cnpm install vuex --save
五 修改代码
├── App.vue
├── components
│ ├── Content.vue
│ ├── Home.vue
│ ├── News.vue
│ ├── User
│ │ ├── AddUser.vue
│ │ └── UserList.vue
│ └── User.vue
├── main.js
├── router
│ └── router.js
└── vuex
└── store.js
App.vue
<template>
<div id="app">
<header class="header">
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
<router-link to="/user/userlist">user</router-link>
</header>
<hr>
<br>
<router-view></router-view>
</div>
</template>
<script>
import Home from './components/Home.vue';
import News from './components/News.vue';
import User from './components/User.vue';
export default {
name: "app",
data() {
return {
msg:'hello vue world!',
};
},
components:{
'v-home':Home,
'v-news':News,
'v-user':User
},
};
</script>
<style>
.header{
height: 4.4em;
background: #000;
color:#fff;
line-height: 4.4rem;
text-align: center;
}
.header a{
color:#fff;
padding: 0 2 rem;
}
</style>
Content.vue
<template>
<div id="content">
i am content
<h2>{{list.title}}</h2>
<div v-html="list.content"></div>
</div>
</template>
<script>
export default {
data(){
return {
msg: "content",
list: []
}
},
methods:{
requestData(aid){
console.log(aid)
var api = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=" + aid
this.$http.get(api).then((response)=>{
console.log(response.body.result[0])
this.list = response.body.result[0];
},(err)=>{
console.log(err)
})
}
},
mounted(){
console.log(this.$route.params)
var aid = this.$route.params.aid;
this.requestData(aid);
},
}
</script>
Home.vue
<template>
<!-- all content need in root-->
<div>
Home
<br>
{{this.$store.state.count}}
<button @click="incount()">add count</button>
</div>
</template>
<script>
import store from '../vuex/store.js';
export default {
data(){
return {
msg:'i am home component!',
list:['goods1', 'goods2','goods3']
}
},
store, methods:{
incount(){
this.$store.commit('incCount');
}
}
}
</script>
<style>
</style>
News.vue
<template>
<!-- all content need in root-->
<div>
News
<br>
<ul>
<li v-for="(item,k) in list" :key="item.id">
<router-link :to="'/content/'+item.aid">{{k}} -- {{item.title}} </router-link>
</li>
</ul>
</div>
</template>
<script>
import store from '../vuex/store.js';
export default {
data(){
return {
msg:'i am news component!',
list:[]
}
},
methods:{
requestData(){
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
console.log(this.$http)
this.$http.jsonp(api).then(function(response){
console.log(response)
this.list = response.body.result;
},function(err){
console.log(err)
})
}
},
mounted(){
this.requestData();
}
}
</script>
<style>
</style>
AddUser.vue
<template>
<div id="adduser">
Add User
</div>
</template>
UserList.vue
<template>
<div id="userlist">
User List
</div>
</template>
User.vue
<template>
<!-- all content need in root-->
<div id="user">
<div class="user">
<div class="left">
<ul>
<li>
<router-link to="/user/adduser"> Add User</router-link>
</li>
<li>
<router-link to="/user/userlist">User list</router-link>
</li>
</ul>
</div>
<div class="right">
<router-view></router-view>
</div>
</div>
<br>
</div>
</template>
<script>
export default {
data(){
return {
msg:'i am user component!',
}
}
}
</script>
<style lang="scss">
.user{
display: flex;
.left{
width: 200px;
min-height:400px;
border-right:1px solid #eee;
.li{
line-height:2;
}
}
.right{
flex:1;
}
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import './assets/css/basic.scss'
import router from './router/router.js'
import VueResource from 'vue-resource'
Vue.use(VueResource)
new Vue({
el: '#app',
router,
render: h => h(App)
})
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '../components/Home.vue'
import News from '../components/News.vue'
import Content from '../components/Content.vue'
import User from '../components/User.vue'
import AddUser from '../components/User/AddUser.vue'
import UserList from '../components/User/UserList.vue'
const routes = [
{path:'/home', component:Home},
{path:'/news', component:News},
{
path:'/user',
component:User,
children:[
{path:'adduser', component:AddUser},
{path:'userlist', component:UserList},
]
},
{path:'/content/:aid', component:Content},
{path:'*', redirect:''}
]
const router = new VueRouter({
routes
})
export default router;
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//data
var state = {
count:1
}
//function
var mutations={
incCount(){
++state.count;
}
}
const store = new Vuex.Store({
state,
mutations: mutations
})
export default store;
六 运行
npm run dev
七 总结
Vuex用于不是父子组件，也不是兄弟组件的传值。数据共享，数据持久化。可也用本地存储和session实现。
state 状态管理变量的表
mutations 修改状态变量的函数
《1 导入vuex，定义数据和状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//data
var state = {
count:1
}
//function
var mutations={
incCount(){
++state.count;
}
}
const store = new Vuex.Store({
state,
mutations: mutations
})
export default store;
《2 在页面使用，本地函数，调用vuex模块中的mutations函数
import store from '../vuex/store.js';
export default {
data(){
},
store, methods:{
incount(){
this.$store.commit('incCount');
}
}
}
《3 页面使用vuex中的变量
<div>
Home
<br>
{{this.$store.state.count}}
<button @click="incount()">add count</button>
</div>
网友评论