2019-10-18

2.9Vue基础vuex官网

Vuex的目的，解决各个组件之间的共用一处数据的问题

vuex.png

1. 核心概念

• state
• mutations
• actions

2. 配置步骤(构建vuex,挂载到文档中)
   2.1 touch ./compontes/store.js
   在store.js中

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

//明确说明使用vuex
Vue.use(Vuex)
//state是数据
const state={
    count:1
};
//mutation是对应的方法
const mutations={
    increment(state){
        state.count++;
    },
    decrement(state){
        state.count--;
    }

};

const actions={
    increment:({commit})=>{
        commit('increment')
    },
    decrement:({commit})=>{
        commit('decrement')
    }

};

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

在入口文中设置App.vue
import store from './strore

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

在components中创建新的文件
touch ./components/vuex.vue
在App.vue中引入文件
在vuex.vue中<script>

//将其方法关联到组件中

import { mapActions } form 'vuex'

export default{
    methods:mapActions([
        'increment',
        'decrement'
    ])
}

in template

<div>
<button @click="increment">增加</button>//关联到具体的方法
    {{$store.state.count}}//关联到vuex中的state数据
</div>