1. 注入store 到 main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
2. 创建 store/index.js 文件夹存放vuex的state、getters、mutations、actions
(1)不使用module(模块)
import Vue from 'vue'
import vuex from 'vuex'
import HelloWorld from '../components/HelloWorld.js'
Vue.use(vuex);
let store = new vuex.Store({
state:{...},
getters:{...},
mutations:{...},
actions:{...}
});
export default store;
(2)使用module(模块)
import Vue from 'vue'
import vuex from 'vuex'
import HelloWorld from '../components/HelloWorld.js'
Vue.use(vuex);
let store = new vuex.Store({
modules:{
HelloWorld
}
});
export default store;
HelloWorld.js
export default {
state:{
str1 : 'Hello',
str2 : 'World',
str3 : '!',
num : 1
},
getters:{
getStr:state=>{
return state.str1 +' . '+ state.str2 +' . '+ state.str3
}
},
mutations:{
add(state,payload){
state.num += payload.add;
},
dec(state,payload){
state.num -= payload.dec;
}
}
}
HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg1 }}</h1>
<h2>{{ str1 }} {{ str2 }} {{ str3 }}</h2>
<h2>{{ msg2 }}</h2>
<h2>{{ str4 }}</h2>
<h1 @click="addNum">{{ num }}</h1>
<h1 @click="dec({dec:1})">{{ num }}</h1>
</div>
</template>
<script>
import { mapState, mapGetters ,mapMutations } from 'vuex'
// import { createNamespacedHelpers } from 'vuex'
// const { mapState } = createNamespacedHelpers('/HelloWorld');
export default {
name: 'HelloWorld',
data () {
return {
}
},
computed:{
msg1(){
return this.$store.state.HelloWorld.str1 + '....'
},
...mapState({
str1: state => state.HelloWorld.str1,
str2: state => state.HelloWorld.str2,
str3: state => state.HelloWorld.str3,
num : state => state.HelloWorld.num
}),
msg2(){
return this.$store.getters.getStr;
},
...mapGetters([
'getStr'
])
},
methods:{
addNum(){
this.$store.commit('add',{add:2})
},
...mapMutations([
'dec' // 参数:payload注入方式:<h1 @click="dec({dec:1})">{{ num }}</h1>
])
}
}
</script>