vue安装vuex框架

npm install vuex --save-dev

import Vue from ‘vue‘;
import Vuex from ‘vuex‘;
Vue.use(Vuex);            //vuex初始化

let note = new Vuex.Store({
  state:{            //存储空间
    items:[],
    name:‘张三‘,
    say:‘hello‘
  },
  mutations:{            //事件响应，修改存储的方法集
    changeName:function(state,data){
      state.name = data.name;
    },
    changeSay:function(state,data){
      state.say = data.say;
    },
    changeItem:function(state,data){
      state.items = data;
    }
  }
});

export default note

import note from ‘../stores/note‘
export function changeName(id){
    alert(id);
    //commit抛出事件,mutations中响应对应的事件changeItem
    note.commit(‘changeItem‘,[{id:1,name:‘张三‘,say:‘hello‘},{id:2,name:‘李四‘,say:‘你好‘},{id:3,name:‘王五‘,say:‘哈哈‘}]);
};

import note from ‘../stores/note‘
export function getShow(vuea){
    //默认传入所在的vue对象
    //alert(note.state.name);
    return note.state.items;
}

<template>
  <div id="app" class="app">
    hello,note
    <table border=‘1‘ align=‘center‘>
        <tr v-for="item in items">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.say}}</td>
        </tr>
    </table>
    <button @click=‘changeName‘>改名</button>
  </div>
 </template>
  <script>
  import note from ‘../stores/note‘
  import {getShow} from ‘../getdata/getter‘
  import {changeName} from ‘../actions/Action‘

      export default {
        computed:{ //items无须在data中声明,getShow传入的参数是this(vue对象)
            items:getShow
        },
        methods:{
            changeName:function(){
                changeName(1);
            }
        }  
    }
  </script>