Vue之Vuex

一.什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是一个数据统一管理工具

二.如何使用vuex

首先肯定是要下载vuex ,使用 npm install vuex --save-dev 下载

引入vuex,这里我建议如果数据量不大把vuex所有的属性单独写到一个js文件里面,方便管理

import Vuex from 'vuex' //使用vuex

Vue.use(Vuex);//调用vuex

三.使用state创建数据,它用来创建一些初始数据,以方便各个组件之间来回调用

var state = {
    num:0
}

四.有时候我们需要从 store 中的 state 中派生出一些状态,就使用getters

const getters={
    num: state => {
      return state.num
    }
  }

五.更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

const mutations = {
    addNum(state){
        state.num++
    }
}

六.Action 类似于 mutation，不同在于：1.Action 提交的是 mutation，而不是直接变更状态。2.Action 可以包含任意异步操作

const actions = {
    addNum({commit}){
        commit('addNum')
    }
}

七.导出

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

七.在main.js中引入vuex

import store from './vuex'  //这个vuex为你的写vuexjs文件

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

八.在vue组件中使用vuex

import {mapGetters,mapActions} from 'vuex'

export default {
        data(){
            return {
            }
        },
        computed:{
            ...mapGetters([
                'num'
            ]),

        },
        methods:{
            ...mapActions([
                'addNum'
            ])
        }

    }