taylor
8 years ago
11 changed files with 154 additions and 194 deletions
-
2config/index.js
-
7package.json
-
22src/components/Home.vue
-
72src/components/Login.vue
-
126src/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> |
<template> |
||||
<section>page4... |
|
||||
</section> |
|
||||
|
<div> |
||||
|
<h1>vuex 测试</h1> |
||||
|
Clicked: {{ getCount }} times |
||||
|
<button @click="increment">+</button> |
||||
|
<button @click="decrement">-</button> |
||||
|
</div> |
||||
</template> |
</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