- 全局安装vuex
npm install vuex --save-dev
- 建立独立文件
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}
- 在页面导入,本例子是在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层。
