Vue-学习总结（一）-vuex

在学习vuex之前，我们要思考这些问题：什么是vuex？为什么使用vuex？怎么使用vuex？伴随着这些问题我们来开始学习，最好的学习资料就是官方文档，建议在看本篇文章之前先把vuex官方文档过一遍，vuex官方文档地址：https://vuex.vuejs.org/zh-cn/

本文是就上面的第三个问题vuex的使用进行的，关于前两个问题，读过官网就可以找到答案，下面就以一个简单的demo对vuex进行实际的应用，demo主要是对数字的增加和减少。

使用脚手架创建vue项目

在终端输入以下指令

  vue init webpack-simple vuex-demo
  cd vuex-demo
  npm install
  npm run dev

安装vuex，输入以下指令：

npm install vuex  -D

创建文件夹命名为store,在该文件夹下新建index.js、getters.js、 actions.js和mutations.js
目录结构如下图所示：

目录结构.png

在main.js中引入store仓库，代码如下：

import App from './App.vue'
import store from './store/index'

new Vue({
  store,
  el: '#app',
  render: h => h(App)
})

在demo中使用vuex的辅助函数mapGetters和mapActions对赋值和事件进行统一处理，
App.vue中有关代码如下：

  <div id="app">
    <h1>{{ msg }}</h1>
    <input type="button" value="增加" @click="add"/>
    <input type="button" value="减少" @click="minus"/>
    <h1>{{ count }}</h1>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'app',
  data () {
    return {
      msg: 'vuex学习demo'
    }
  },
  computed: mapGetters([
      'count'
    ]),
    methods: mapActions([
      'add',
      'minus'
    ])
}
</script>

index.js中代码如下：

import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

Vue.use(Vuex)

const state = {
    count: 0
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

getters.js代码如下：

    count(state) {
        return state.count
    }
}

actions.js代码如下:

    add: ({ 
        commit 
    }) => {
        commit('add')
    },
     minus: ({ 
        commit 
    }) => {
        commit('minus')
    }
}

mutations.js代码如下：

    add(state) {
        state.count++
    },
    minus(state) {
        if(state.count === 0){
            state.count = 0
        }else{
            state.count--
        }
    } 
}

最后附上demo地址，https://github.com/BoryLee/vuex-demo

小知识：
. 表示当前目录，.. 表示上一级目录，/表示根目录