2.9Vue基础vuex官网
Vuex的目的，解决各个组件之间的共用一处数据的问题
vuex.png
- 核心概念
- state
- mutations
- actions
- 配置步骤(构建vuex,挂载到文档中)
2.1touch ./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>
