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>

当然这只是参考。代码风格千万种只要找到合适自己的好用的都可以参考借鉴下。