本文共 1479 字，大约阅读时间需要 4 分钟。

Vuex

Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。（简单理解就是多个组件需要访问的数据存放在这里面统一管理）

为什么用Vuex

#	说明
	可以看到，根组件的data这个数据对A、B组件来说有多么麻烦了吧，一层一层往下传，又一层一层往上传；因此如果有个地方存放着这个data，各组件直接从里面获取或者设置不就好了吗？Vuex就有这个作用。
	有了Vuex，A可直接通过Getter获取到数据，B也可直接通过Mutation设置数据，就很方便啦。

Vuex使用

• 首先是搭建vue项目–>vue init webpack vuex_demo。

• 看一下项目是否搭建成功–>cd vuex_demo;npm run dev。

• 引入vuex，输入npm/cnpm install vuex --save 在package.json中看到vuex则证明安装成功。

• 在src下新建store文件夹，并在其里新建store.js文件。

// 1.引入import Vue from 'vue'import Vuex from 'vuex'// 2.使用Vue.use(Vuex)// 3.创建store对象并导出export const store = new Vuex.Store({
     state: {
       Token: 'abc'  },  getters: {
    // 获取token    GET_TOKEN: (state) => {
    return state.Token }  },  mutations: {
    // 设置token    SET_TOKEN: (state, token) => {
    state.Token = token }  },  actions: {
    // context类似于this.store    login: (context, token) => {
         context.commit('SET_TOKEN', token)    }  }})

• 在main.js里引入store并添加到vue实例中。

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'// 4.main.js引入store，并添加到vue上 就可以通过this.$store访问import {
   store} from './store/store'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
     el: '#app',  store,  components: {
    App },  template: '
   '})

• 在Helloworld.vue添加下面代码，具体见注释。

• 运行结果。
  

转载地址：https://blog.csdn.net/qq_39811414/article/details/107143827 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！