13518219792
这篇文章主要介绍了如何安装vue状态管理Vuex，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
10余年的平房网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整平房建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“平房网站设计”,“平房网站推广”以来，每个客户项目都认真落实执行。
安装vue状态管理的方法：1、创建一个基于Vue的工程，执行“npm install”命令安装依赖；2、在控制命令行中，执行“npm install vuex --save”命令安装Vuex即可。
本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
这个状态自管理应用包含以下几个部分：
state，驱动应用的数据源；
view，以声明方式将state映射到视图；
actions，响应在view上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的极简示意：
更复杂的情况
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的global event bus
就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：
Flux 架构就像眼镜：您自会知道什么时候需要它。
首先需要创建一个基于Vue的工程，通常你可以这样做：
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev
利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。
npm install vuex --save
要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。
通过简单的依赖安装操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。
一个简单的示例，在main.js文件中输入如下代码：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
store.commit('increment')
/* eslint-disable no-new */
new Vue({
el: '#app',
template: `{{ count }}
`,
computed: {
count () {
return store.state.count
}
}
})运行后可以看到页面上显示一个1，即函数increment已经正确的执行，count由初始的0自加后变为1输出，
需要指出的是，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。
通常我们不会这样去使用它，更好的使用方法是：
1、新建一个store文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。
import Vue from 'vue'; import Vuex from 'vuex';
2、在store.js文件中，用Vue.use对vuex进行引用。
Vue.use(Vuex);
3、在main.js 中引入新建的vuex文件
import store from './store/store'
4、Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)，通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '1、现在我们store.js文件里增加一个常量对象。
state: {
count: 1
},2、用export default 封装代码，让外部可以引用。
export default new Vuex.Store({
name: 'store',
state: {
count: 1
}
})3、新建一个Vue的测试模板，位置在components文件夹下，名字随便起，我这里叫count.vue。在模板中我们使用{{$store.state.count}}输出count 的值（注意：由于前面已经将store注入到vue的实例中，故不需要再次引用）。
{{msg}}
{{$store.state.count}}
4、在store.js文件中加入两个改变state的方法。
mutations: {
increment (state) {
state.count += 1
},
decrement (state) {
state.count -= 1
}
}5、在test.vue模板中加入两个按钮，并调用mutations中的方法。
