1.在vue脚手架安装完成后,安装cnpm install vuex --save
2.在vue脚手架src目录下创建文件夹store
(2-1)并在store文件夹中创建index.js文件
3.在store文件夹的index.js文件中保存可公用数据
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//区分数据用const 定义一个库eg:shopping--->
const shopping = {
state: {
//数据
num:10,
arr:[
{title:"标题1"},{title:"标题2"},{title:"标题3"}
]
},
mutations: {
//与发送过来的的事件对应,并接收数据
goodsItem(state,index){
state.num=index;
}
}
//可以理解为主库-->
const store = new Vuex.Store({
state: {
},
mutations: {
},
modules: {
//shopping可以理解为主库里面分的小仓库
shopping
}
)
export default store
```
4.在vue脚手架src目录下main.js中引用vuex
```
import store from './store/index'
new Vue({
el: '#app',
router,
store,
components: { App },
template: ''
})
```
5.使用store中的数据
```
<template>
<div id="content">
<p>{{num11}}</p>
<ul>
<li v-for="(item,index) in data" :key="index" @click="clickHandle(index)">item.title</li>
</ul>
</div>
</template>
<script>
export default {
computed:{
//从store中获取数据
num11(){ return this.$store.state.shopping.num } ,
data(){ return this.$store.state.shopping.arr}
},
methods:{
clickHandle(index){
//向store发送事件goodsItem,并传递数据index
this.$store.commit('goodsItem',index)
}
}
</script>
```
6.接下来就是最重要的一步,千万不要忘了记得点赞 记得点赞 记得点赞
哈哈哈哈