taylor
8 years ago
11 changed files with 154 additions and 194 deletions
-
2config/index.js
-
7package.json
-
22src/components/Home.vue
-
122src/components/nav1/Page1.vue
-
32src/components/nav2/Page4.vue
-
17src/main.js
-
24src/store/config.js
-
7src/vuex/actions.js
-
4src/vuex/getters.js
-
29src/vuex/store.js
@ -1,4 +1,32 @@ |
|||
<template> |
|||
<section>page4... |
|||
</section> |
|||
<div> |
|||
<h1>vuex 测试</h1> |
|||
Clicked: {{ getCount }} times |
|||
<button @click="increment">+</button> |
|||
<button @click="decrement">-</button> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { mapActions } from 'vuex' |
|||
|
|||
export default { |
|||
computed: { |
|||
// 使用对象展开运算符将 getters 混入 computed 对象中 |
|||
...mapGetters([ |
|||
'getCount' |
|||
// ... |
|||
]) |
|||
}, |
|||
methods: { |
|||
...mapActions([ |
|||
'increment', // 映射 this.increment() 为 this.$store.dispatch('increment') |
|||
'decrement' |
|||
]) |
|||
//...mapActions({ |
|||
// add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment') |
|||
//}) |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,24 +0,0 @@ |
|||
import Vue from 'vue' |
|||
import Vuex from 'vuex' |
|||
|
|||
Vue.use(Vuex) |
|||
|
|||
const config = new Vuex.Store({ |
|||
state: { |
|||
count: 0, |
|||
//currentPath: '/login',
|
|||
currentPathName: '登录', |
|||
currentPathNameParent: '导航一', |
|||
apiUrl: 'http://localhost:5683/WebForm1.aspx' |
|||
}, |
|||
mutations: { |
|||
increment(state) { |
|||
state.count++ |
|||
}, |
|||
setCurrentPath: function (state, path) { |
|||
state.currentPath = path |
|||
}, |
|||
} |
|||
}) |
|||
|
|||
export default config |
|||
@ -0,0 +1,7 @@ |
|||
//test
|
|||
export const increment = ({commit}) => { |
|||
commit('INCREMENT') |
|||
} |
|||
export const decrement = ({commit}) => { |
|||
commit('DECREMENT') |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
//test
|
|||
export const getCount = state => { |
|||
return state.count |
|||
} |
|||
@ -0,0 +1,29 @@ |
|||
import Vue from 'vue' |
|||
import Vuex from 'vuex' |
|||
import * as actions from './actions' |
|||
import * as getters from './getters' |
|||
|
|||
Vue.use(Vuex) |
|||
|
|||
// 应用初始状态
|
|||
const state = { |
|||
count: 10 |
|||
} |
|||
|
|||
// 定义所需的 mutations
|
|||
const mutations = { |
|||
INCREMENT(state) { |
|||
state.count++ |
|||
}, |
|||
DECREMENT(state) { |
|||
state.count-- |
|||
} |
|||
} |
|||
|
|||
// 创建 store 实例
|
|||
export default new Vuex.Store({ |
|||
actions, |
|||
getters, |
|||
state, |
|||
mutations |
|||
}) |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue