教你简单使用vuex

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.接下来就是最重要的一步，千万不要忘了记得点赞 记得点赞 记得点赞

哈哈哈哈