VueX

初始Vuex:
vuex是一个专门为vue.js应用程序开发的状态管理模式。这个状态与之对应的是data中的属性，需要共享给其他组件使用的部分。也就是说使用vuex进行统一集中管理共享的data。

vuex中的五种基本对象：

• state:存储状态(变量)
• getters：对数据获取之前的再次编译，也就是state的计算属性。在组件中使用 $sotre.getter.fun()
• mutations：同步修改状态。在组件中使用$store.commit("",params)。类似于组件中的自定义事件。
• actions：异步操作。在组件中使用是$store.dispath("")。
• modules：store的子模块，开发大型项目，方便管理状态而使用

如何使用:
1.首先创建项目mydemo

npm init webpack mydemo

2.运行项目

npm  run  dev

3.在项目下引入vuex

npm install vuex --save

4.在src目录下创建文件夹vuex,并创建store.js文件。

5.在stoere.js中书写代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
   name: "hello"
}

export default new Vuex.Store({
    state
})

PS:注意变量名。

6.在main.js中引入

import store from './vuex/store' // 引入store

new Vue({
  el: '#app',
  router,
  store, 
  components: { App },
  template: ''
})

7.在任意组件中编写

<template>
   <div id="second">
     <p>{{$stroe.state.name}}</p>
    <div>
 </tenplate>

此时可以看到如下页面:hello为vuex管理的值

小结:
只需要在项目目录下安装vuex，然后在定义的store.js中定义state对象，并且暴露出去。然后在main.js中引用store.js就可使用。
如何操作值:
利用mutations和actions方法对值进行操作。在sotre.js中定义mutations对象，该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。在mutations中定义两个方法，增加和减少，并且设置一个参数n，默认值为0，然后在Vuex.Store中使用它。

在sotre.js中书写代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
    count :0
}
const mutations = {
    mutationsAddCount(state, count	 = 0) {
        return (state.count += count)
    },
    mutationsReduceCount(state, count = 0) {
        return (state.count -= count)
    }
}
export default new Vuex.Store({
    state,
    mutations
})

在任意组件中书写代码。定义模板，并且在method中定义函数。

<template>
    <div class"second">
      <h3>{{store.state.count	}}</h3>
      <div>
      <button @click="AddClick(10)">增加</button>
      <button @click="ReduceClick(10)">减少</button>
     </div>
    </div>
 <template>
 
 <script>
 methods: {
    AddClick(count){
      this.$store.commit('mutationsAddCount',count);
    },
    ReduceClick(count){
      this.$store.commit('mutationsReduceCount',count);
    }
  }
}
</script>   
 

在main.js中引入store.js同上。
异步操作:对数据的异步操作，
actions是异步操作。书写store.js代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
    count :0
}

const actions = {
    actionsAddCount(context, n = 0) {
        console.log(context)
        return context.commit('mutationsAddCount', n)
    },
    actionsReduceCount({ commit }, n = 0) {
        return commit('mutationsReduceCount', n)
    }
}
export default new Vuex.Store({
    state,
    actions
})

任意组件书写代码:

<template>
    <div class"second">
      <h3>{{store.state.count }}</h3>
      <div>
      <button @click="ActionsAdd(10)">异步增加</button>
      <button @click="ActionsReduce(10))">异步减少</button>
     </div>
    </div>
 <template>
 
 <script>
 export default {
 methods: {
    ActionsAdd(n){
      this.$store.dispatch('actionsAddCount',n)
    },
    ActionsReduce(n){
      this.$store.dispatch('actionsReduceCount',n)
    }
  }
}
</script>

在main.js中引入store.js同上。
使用getter属性来获取state：

const getters = {
    getterCount(state, n = 0) {
        return (state.count += n)
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

{{count}}
const getters = {
    getterCount(state) {
        return (state.count += 10)
    }
}