标签：mic 状态 需要 index page dex code 路由 保存
vuex是vue的状态管理中心，vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，常用于：
1.多个视图依赖同一状态(l例：菜单导航)
2.来自不同视图的行为需要变更同一状态(例如评论弹幕)
上篇创建的vue项目目录结构：
在上一节我们已经安装了vuex模块。查看store/index.js内容，如下：
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules: { }, });
上面引入Vue模块和Vuex模块，并将Vuex安装到Vue中。
下面使用vuex。在Test路由中改变值，在about模块中接收，代码如下：
(1)修改store/index.js
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); export default new Vuex.Store({ state: { count: 0, }, mutations: { increase() { this.state.count = this.state.count + 1; }, }, actions: { }, modules: { }, });
定义一个状态count，mutations中是修改状态的唯一入口。
(2)修改Test.vue
<template> <div class="test"> 这是Test <button tybe="button" @click="addOne()">点击我</button> </div> </template> <script> import store from ‘@/store‘; export default { name: ‘Test‘, store, methods: { addOne() { console.log(‘add‘); store.commit(‘increase‘); }, }, }; </script>
点击按钮的时候调用方法addOne()。addOne()中调用store.commit("increase") 提交该方法进行修改状态，相当于调用 Vuex.Store 实例的 increase() 方法。
(3)修改About.vue接收状态count
<template>
<div class="about">
<h1>This is an about page</h1>
{{msg}}
</div>
</template>
<script>
import store from ‘@/store‘;
export default {
name: ‘About‘,
store,
data() {
return {
msg: store.state.count,
};
},
};
</script>
(4)测试：
vue-cli安装以及创建一个简单的项目(二)(vuex使用)
标签：mic 状态 需要 index page dex code 路由 保存
原文地址：https://www.cnblogs.com/qlqwjy/p/11938755.html
