vuex入门

vuex是专门为vue服务的管理状态的一个东西，也可以说是管理data中需要共用的属性，下面这个小栗子就是个入门，里面的很多东西具体的意思会在后面补充，也许这个栗子做完之后会觉得比以前做的麻烦，但是我们主要是想用一个公共的思想他可以被任意一个component调用

---

怎么安装vuex就不说了，首先在src下建一个vuex文件夹，在它下面建一个store.js来做仓库，以后我们主要就在这个下面引入vuex的操作，剑豪之后首先引入vue和vuex

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

再加一行代码就可以使用vuex了

Vue.use(Vuex);

在仓库中放共用的数据，state也可以说是状态

const state = {
    count:1
}

加两个方法，这里就放在可修改的mutations里

const mutations = {
    add(state){
       state.count++
    },
    reduce(state){
       state.count--
    }
}

暴露出去

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

要注意mutations是固定写法

下面就要在想应用vuex的组件里动手了

<div>
    <h2>{{message}}</h2>
    <hr />
    <p>{{$store.state.count}}</P>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit
    //注意必须写单引号才行
    ('reduce')">-</button>
</div>

注意调用的写法

<script>
   import store from '@/vuex/store'
   //注意是写在暴露前面的
   export default{
       name:'Hi1',
       data(){
           return{
               message:'Hello Vuex!'
           }
        },
        store
        //在data后
   }
</script>