vuex的state，mutation，getter，action

開始！正常的簡單的拆分下是這樣的文件固然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>

固然這只是參考。代碼風格千萬種只要找到合適本身的好用的均可以參考借鑑下。