vuex笔记

1. 全局安装vuex

npm install vuex --save-dev

2. 建立独立文件

import Vue from 'vue'
import Vuex,{mapState} from "vuex"
Vue.use(Vuex);
let store = new Vuex.Store({
    state:{
      list:[{name:"mazhenxiao",id:1,value:"mazhenxiao@gmailcom"}]
    },
    mutations:{
        setdata(state,arg){
             console.log(arg);
        }
    }
  })

export {store,mapState}

3. 在页面导入,本例子是在vue-cli中测试，发现一直报错，报错插件为eslint-loader，果断在build文件下的webpack.base.conf.js中注释掉改插件，程序顺利跑起来。

<template>
  <div class="hello">

    <h2>Essential Links</h2>
    <ul>
      <li v-for="li in list" @click="eventclick(li)">{{li.name}}</li>
    </ul>
  </div>
</template>

<script>
import {store,mapState} from "@/router/setvuex"
export default {
  name: 'hello',
  store,
  computed:mapState({
    list:state=>state.list
  }),
  methods:{
      eventclick(arg){
        arg.id+=1;
        arg.name+=arg.id
        this.$store.commit("setdata",arg)
        
      }
  }

}
</script>

总结如下：
vuex为多模块统一数据源解决方案，在当前componet中绑定数据时应绑定到computed中，并给当前模块绑定vuex实例，在有需要改动数据源中使用 this.$store.commit("xxx",{xxx});方式触发mutations，并更新view层。