一 创建测试项目
vue init webpack-simple vuedemo
二 进入demo目录
cd vuedemo
三 安装依赖
cnpm install
四 安装vuex
cnpm install vuex --save
五 修改代码
├── src
│ ├── 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>
{{this.$store.getters.computedCount}}
</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');
this.$store.dispatch('incMutationsCount');
}
}
}
</script>
<style>
</style>
News.vue
<template>
<!-- all content need in root-->
<div>
News
<br>
{{this.$store.state.count}}
<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:[]
}
},
store, 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;
this.$store.commit('addList', response.body.result);
},function(err){
console.log(err)
})
}
},
mounted(){
var listData= this.$store.state.list;
if(listData.length > 0){
this.list = listData;
} else {
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 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,
list:[]
}
//function
var mutations={
incCount(){
++state.count;
},
addList(data){
state.list = data
}
}
var getters = {
computedCount:(state) =>{
return state.count*2
}
}
var actions = {
incMutationsCount(context) {
context.commit('incCount')
}
}
const store = new Vuex.Store({
state,
mutations,
getters,
actions
})
export default store;
六 运行
npm run dev
七 总结
getters 属性计算器，可以返回属性 或 属性经过修改的值
actions 间接修改状态变量的函数，只能调用mutation，可以异步调用
《1 导入vuex，定义数据和状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//data
var state = {
count:1
}
//function
var mutations={
incCount(){
++state.count;
}
}
var getters = {
computedCount:(state) =>{
return state.count*2
}
}
var actions = {
incMutationsCount(context) {
context.commit('incCount')
}
}
const store = new Vuex.Store({
state,
mutations,
getters,
actions
})
export default store;
《2 在页面使用，本地函数，调用vuex模块中的actions函数
import store from '../vuex/store.js';
export default {
data(){
return {
}
},
store, methods:{
incount(){
this.$store.dispatch('incMutationsCount');
}
}
}
《3 页面使用vuex中的getters
<div>
Home
<br>
{{this.$store.getters.computedCount}}
</div>
网友评论