小白入门Vuex

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: '<App/>'
})

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

<template>
  <div class="hello">
    <h1>Hello Vuex.Token is {{token}}</h1>
    <p>
      <input type="text" v-model="newToken"/>
      <button @click="getToken">获取token值</button>
      <button @click="editToken">修改token值</button>
    </p>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      token: this.$store.getters.GET_TOKEN, // 通过这种方式访问token
      newToken: ''
    }
  },
  methods: {
    getToken () {
      this.token = this.$store.getters.GET_TOKEN
    },
    editToken () {
      // this.$store.commit('SET_TOKEN', this.newToken) 对于mutation通过这种方式来访问
      this.$store.dispatch('login', this.newToken) // 对于action中的方法 通过dispatch方法进行访问
      // action的好处
      // mutation在vue devtools中会立即打印方法，不一定完成了修改操作。比如在editToken设置延时
      // 而通过action就会完成操作再打印方法，就方便开发人员
      this.newToken = ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

• 运行结果。