開始!正常的簡單的拆分下是這樣的檔案當然module可以在store下面建立一個檔案夾用來處理單獨子產品的vuex管理比較合适。
1.index.js下面
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import * as actions from './actions'
import * as getters from './getters'
import createRenderer from 'vuex/dist/logger'
Vue.use(Vuex)
const debug = process.env.NODE_DEV !== 'production'
export default new Vuex.Store({
state,
mutations,
actions,
getters,
strict: debug,
plugins: debug ? [createRenderer()] : []
})
2.state.js 存放的都是公共資料源(簡稱全局資料或者全局變量)
const state = {
count:0,
num:1
}
export default state
3.mutations.js
import * as types from './mutation-types'
const mutations = {
// ++操作
[types.ADD_COUNT](state,count) {
console.log(state, 'state狀态', count, 'count額外參數')
state.count++
},
// --操作
[types.REDUCE_COUNT](state,count) {
console.log(state, 'state狀态', count, 'count額外參數')
state.count--
},
// num ++
[types.NUM_PLUS](state,count) {
console.log(state, 'state狀态', count, 'count額外參數')
state.num++
},
}
export default mutations
4.mutation-types.js mutation常量一般
export const ADD_COUNT = 'ADD_COUNT' // count ++
export const REDUCE_COUNT = 'REDUCE_COUNT' // count --
export const NUM_PLUS = 'NUM_PLUS' // num ++
5.getters.js vuex 中的getters 想當于vue中的computed ,getters是vuex 中的計算屬性 ,計算屬性寫起來是方法,但它是個屬性
export const count = state => state.count
export const num = state => state.num
7.actions.js
// import * as types from './mutation-types'
/* actions體驗vuex 的異步特效*/
export const addCount = ({commit}) => {
setTimeout(() => {
commit('ADD_COUNT') // 送出的是mutation,mutation是同步操作
}, 1000)
}
export const reduceCount = ({commit}) => {
setTimeout(() => {
commit('REDUCE_COUNT') // 送出的是mutation,mutation是同步操作
}, 1000)
}
export const numPlus = ({commit}) => {
setTimeout(() => {
commit('NUM_PLUS') // 送出的是mutation,mutation是同步操作
}, 1000)
}
8.元件内使用
<template>
<div class="hello">
<p>state:{},狀态資料集</p>
<p> getters:{},公共狀态資料集</p>
<p>mutations:{},主要用于改變狀态</p>
<p>actions:{},是可以解決異步問題</p>
<hr/>
<h1>{{ msg }}</h1>
<p>在元件中如何擷取vuex的state對象中的屬性:方法一<span style="color:red;margin-left:15px">{{$store.state.count}}</span></p>
<p>在元件中如何擷取vuex的state對象中的屬性:方法二<span style="color:red;margin-left:15px">{{count}}</span></p>
<p>在元件中如何擷取vuex的state對象中的屬性:方法三(寫法一可用别名)<span style="color:red;margin-left:15px">{{newCount}}</span></p>
<p>在元件中如何擷取vuex的state對象中的屬性:方法三(寫法二)<span style="color:red;margin-left:15px">{{count}}</span></p>
<hr/>
<h1>{{ msg1 }}</h1>
<p>在元件中如何使用vuex的getters:寫法一<span style="color:red;margin-left:15px">{{getNum}}</span></p>
<p>在元件中如何使用vuex的getters:寫法二<span style="color:red;margin-left:15px">{{num}}</span></p>
<hr/>
<h1>{{ msg2 }}</h1>
<p style="margin-top:10px">
<el-button @click="$store.commit('ADD_COUNT')">mutations寫法一(count++操作)</el-button>
<el-button type="primary" @click="$store.commit('REDUCE_COUNT')">mutations寫法一(count--操作)</el-button>
<el-button type="success" @click="$store.commit('NUM_PLUS')">mutations寫法一(num++操作)</el-button>
</p>
<p style="margin-top:10px">
<el-button type="info" @click="ADD_COUNT">mutations寫法二(count++操作)</el-button>
<el-button type="warning" @click="REDUCE_COUNT">mutations寫法二(count++操作)</el-button>
<el-button type="danger" @click="NUM_PLUS">mutations寫法二(num++操作)</el-button>
</p>
<hr/>
<h1>{{ msg3 }}</h1>
<p style="margin-top:10px">
<el-button @click="$store.dispatch('addCount')">actions寫法一(count++操作)</el-button>
<el-button type="primary" @click="$store.dispatch('reduceCount')">actions寫法一(count--操作)</el-button>
<el-button type="success" @click="$store.dispatch('numPlus')">actions寫法一(num++操作)</el-button>
</p>
<p style="margin-top:10px">
<el-button type="info" @click="addCount">actions寫法二(count++操作)</el-button>
<el-button type="warning" @click="reduceCount">actions寫法二(count--操作)</el-button>
<el-button type="danger" @click="numPlus">actions寫法二(num++操作)</el-button>
</p>
</div>
</template>
<script>
// 使用vuex的各種常用姿勢
import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'vuex之state',
msg1: 'vuex之getters',
msg2: 'vuex之mutations',
msg3: 'vuex之actions',
}
},
computed: {
// vuex 取 state 方法二
count() {
return this.$store.state.count
},
// vuex 取 state 方法三
...mapState({
newCount: state => state.count //寫法一
}),
...mapState(['count']), // 寫法二
/************************/
// vuex 使用 getters 寫法一
getNum() {
return this.$store.getters.num
},
...mapGetters(['num'])
},
created() {
},
methods: {
...mapMutations(['ADD_COUNT','REDUCE_COUNT','NUM_PLUS']),
...mapActions(['addCount','reduceCount','numPlus'])
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
9.App.vue 關于vuex資料重新整理後消失的處理
<template>
<div id="app">
<!-- <img src="./assets/logo.png"> -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
created() {
//在頁面加載時讀取localStorage/ sessionstorage裡的狀态資訊
localStorage.getItem("store") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("store"))))
//在頁面重新整理時将vuex裡的資訊儲存到localStorage裡解決vuex資料頁面重新整理丢失問題
window.addEventListener("beforeunload",()=>{
localStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
</style>
當然這隻是參考。代碼風格千萬種隻要找到合适自己的好用的都可以參考借鑒下。