vuex的概念及使用方法（适用于新手）先简单说一下vuex，VueX 是一个专门为 Vue.js 应用设计的状态管理架构

先简单说一下vuex，VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态。

Vue有几个核心概念，state, getters, mutations, actions。
基本的含义就是如下：

state => 定义基本数据

getter => 从基本数据派生的数据（可以认为是 store 的计算属性）

mutations => 提交更改数据的同步方法

actions => 提交更改数据的异步方法。

获取vuex里的数据有很多种，最简单的就是this.$store.state+vuex里面定义好的数据的名称

State

state就是vuex的基本数据，
代码如下：

const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    })

getters

即从store的state中派生出的状态。

getters接收state作为其第一个参数，接受其他 getters 作为第二个参数，如不需要，第二个参数可以省略
代码如下：

const store = new Vuex.Store({
    state: {
        count:0
    }，
    getters: {
        // 单个参数
        countOne: function(state){
            return state.count * 2
        },
        // 两个参数
        countTwo: function(state, getters) {
            return getters.countOne * 2
        }
    }
})

mutations

提交mutation是更改Vuex中的store中的状态的唯一方法。

mutation必须是同步的，如果要异步需要使用action。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    //无提交参数
    increment(state) {
        state.count++
    }
    //提交参数
    incrementN(state, payload) {
      state.count += payload.n
    }
  }
})

actions

Action 类似于 mutation,Action 是通过调用muatation里的方法改变state的内容,而不是直接改变state的内容。代码如下：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setInterval(function(){
      //使用commit调用mutations里的方法
        context.commit('increment')
      }, 1000)
    }
  }
})

vuex的概念及使用方法（适用于新手）