代码语言：javascript复制
<!-- 接一篇文章 vue开发看这篇文章就够了 https://segmentfault.com/a/1190000012692321 -->
<!--
vuex 我们把它叫做状态管理 ‘状态’一词来源与react 在react中数据在state中 实际上也就是"数据管理"
vuex解决了大型项目的组件间的通信问题 实际上也就是数据中介 所有的数据增删改查全部通过vuex来实现
-->
<div id="app">
<!--页面总调用state中的数据-->
store 中的数据：{{ $store.state.count }}
<button @click="fn">修改store中的数据</button>
<!-- 页面中条用getters中的数据 -->
<p>getters的使用：{{ $store.getters.doneTodosCount }}</p>
</div>
<!--引入包-->
<script src="./vue.js"></script>
<script src="./vuex.js"></script>
<script>
// 创建store，用来存储项目中使用的数据(理解为数据仓库 仓库中有管理数据的方法)。
// 也就是说 整个应用中的数据，都应该交给 store 来管理
// 开发环境下 引入vuex那需要use一下 Vue.use( vuex)
const store = new Vuex.Store({
// state即状态，也就是组件中的data（数据）
state: {
count: 0,
todos: [
{ id: 1, text: '...完成', done: true },
{ id: 2, text: '...完成', done: true },
{ id: 3, text: '...完成', done: true },
{ id: 4, text: '...完成', done: true },
{ id: 5, text: '...未完成', done: false }
]
},
// getters 就是 store 的计算属性，用法与计算属性相同！！！
getters: {
doneTodosCount(state) {
return state.todos.filter(todo => todo.done).length
}
},
// 注意：state中的数据只能通过 mutations 来修改！！！
// 也就是：数据由 store 提供，同样的修改数据方法也是由 store 来提供的，这就是：mutations
mutations: {
increment(state) {
// 参数 state即：上面的state，也就是数据
state.count
},
// payload 表示提交这个方法的时候，传递的数据，最好是一个对象
increment2(state, payload) {
state.count = payload.num
}
}
})
/*
使用 store 中的数据：
修改数据：store.commit('increment')
读取数据：store.state.count
*/
var vm = new Vue({
el: '#app',
data: {
},
methods: {
fn() {
// this.$store.commit('increment')
//通过commit触发mutations中的方法 参数一：方法名 参数二：传递数据
this.$store.commit('increment2', {num: 3})
}
},
// 将 store 与Vue实例关联到一起
store: store
})
</script>
