首先需要有cli脚手架，初始化项目，再安装vuex

npm install --save vuex

在src下创建store文件夹，在里边创建index.js文件

index中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = { 
  listItemsOut: ["zzzzzzzz", "yyyyyyyy", "xxxxxxxx", "wwwwwwww", "vvvvvvvv"],
  listItemsIn: ["aaaaaaaa", "bbbbbbbb", "cccccccc", "dddddddd", "eeeeeeee"],
}
const getters = {}
const actions = {}
const mutations = {}

const store = new Vuex.Store({
  state,    // 共同维护的一个状态，state里面可以是很多个全局状态
  getters,  // 获取数据并渲染
  actions,  // 数据的异步操作
  mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
})
export default store  // 导出store并在 main.js中引用注册。 

main.js中新导入部分

import store from './store'
new Vue({
  store,  // 这样就能全局使用vuex了
})

页面上需要用到computed属性,这里我把两个数组返回过来了

js部分代码如下

computed: {

    listItemsOut(){return this.$store.state.listItemsOut},

    listItemsIn(){return this.$store.state.listItemsIn}

},

html部分如下

<ul>
      <li v-for="(item,index) in listItemsOut" :key="index">
        <a href="#">
          <span>{{item}}</span>
        </a>
        <ul v-if="listItemsIn.length!=0">
          <li v-for="(Item,index) in listItemsIn" :key="index">
            <a href="#">{{Item}}</a>
          </li>
        </ul>
      </li>
</ul>