Foreword

To be first before then, if not in contact with large-scale projects, does not require multiple sub-pages, do not use vuex is totally acceptable.

To tell the truth, I was reading vuex document when it is difficult to understand in order to vuex, not even think I can use it. But until I get the following questions in these items:

When routing switching, routing had too much data transfer over the past too much trouble.
Some of the data is the need to use multiple routes, then I need to get data from multiple back-end

Of course, these problems can be solved, that is, when an object is instantiated vue, these data will be bound to the window object above. But we also have to imagine:

In case the data too much, so readability is not it will fall
If only modify individual data is not all pages can be updated

For the first question, the answer is yes, although we can now also be used to make the idea of modular readability even better, but not a specification for the project just start is always difficult to understand.

For the second question, when you are less of a page, is not such a problem, but if more pages, you will find that when you put the window. $ Data inside the data updated, all pages calculated property will fail, that is, no matter how you modify the data, the page will not update the data.

This time, we need to use our vuex up.

vuex Introduction

So what vuex in the end is?

Quoted the official website of the argument is Vuex is a Vue.js designed for application development of state management. It uses the status of all components centralized storage management application, and a corresponding state rules to ensure a predictable manner changed.

It is still a little difficult to understand, in fact, simply vuex this project is to put all the data is stored in one place, easy to modify and retrieve data .

For example, from this chart below we give you the first simple analysis

In this picture which we clearly can see the three parts

Vue Components represents inside components vue
Backend API API background
Data management component inside vuex

We can understand the vivid, if Vuex is a warehouse, then what is the Vue Components on sales, responsible for the stuff inside the warehouse to show up, Backend API equivalent of people into the cargo, will be responsible for buying goods come (also It is the background to return to the front-end data stored in vuex inside). The vuex is the warehouse, the warehouse there are goods state, managed incoming and outgoing cargo Muations

Reference vuex

Before says state, we could start in our project reference vuex vue

npm install vuex

Then in our src directory create a store folder, create a new file in the store index.js folder inside

// ~/src/store/index.js
import Vue from 'Vue'
import Vuex from 'Vuex'

// 在这里声明实例一个Vue 去引用Vuex状态管理插件
// 这样就可以减少在main.js里面的代码量了
Vue.use(Vuex)

// 返回store实例对象
export default new Vuex.Store({
})

Here to talk about it, this is actually quite vuex Store instantiation of a warehouse.

alternative data state

Why is the alternative to state data it?

It is easy to understand, is to speak the local parameters of the components inside, into a global parameter state can be used, for example, we cited data todo in me.vue components.

Then we can instantiate it out in the store inside

// ~/src/store/index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  }
})

So, how do we use this data in the component inside?

// me.vue组件文件

// ...
<script type="text/ecmascript-6">
export default {
  data() {
    meTodo: [] // 然后在方法里面引用this.meTodo = this.$store.state.todo
  }
}
</script>
// ...

It is not very simple, but we can not always use this value should get once, these vue also want a good team, we can get state inside data by calculating property.

// ...
<script type="text/ecmascript-6">
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  computed: mapState([
  // 映射 this.todo 为 store.state.todo
  'todo'
])
}
</script>
// ...

Equivalent to

// ...
<script type="text/ecmascript-6">
export default {
  computed: 
  todo () {
    return this.$store.state.todo
  }
])
}
</script>
// ...

Computed Property Getter

Sometimes we need the data state of some of the filtering operation, for example, we only a number greater than 10 in todo which, if is computed then we need to use the filter function, for easier, vuex also provides us with the calculated properties getter.

We can modify our ~ / src / store / index file

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  }
})

Then me.vue inside references

// ...
<script type="text/ecmascript-6">
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      'todo'
    ])
  }
}
</script>
// ...

This allows a simple todo get the data is greater than 10

Mutation state of modification

We say how to get data, but how we should modify the data it is not directly assigned to the data can it?

The answer, of course not, vuex regulations, we can only be modified by Mutation data, then, how do we modify the data?
Modify our ~ / src / store / index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  }
})

Then modify the components inside our me.vue

// ...
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from 'vuex'
// 在单独构建的版本中辅助函数为 Vuex.mapMutations
import { mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      'todo'
    ])
  },
  method: {
    ...mapMutations(
      [
        // 将 `this.revsiseTode()` 映射为 `this.$store.commit('revsiseTode')`
        // 如果想传递参数可以使用this.$store.commit('revsiseTode', oneTode)
        // 或者Action
        'revsiseTode' 
      ]
    )
  }
}

Action of use

Writing for so long, and finally to Action's appearance, in fact, anyway, Action attribute primarily to interact with the background and use, here, I suppose todo data can be acquired in routing / me / gettodo inside, therefore, modify ~ / store / index.js

// ...
export default new Vuex.Store({
  state: {
    todo: []
  },
  getters: {
    todo: state => state.todo.filter(number => number > 10)
  },
  mutations: {
    revsiseTode: (state, oneTodo) => (state.todo = oneTodo) // 修改state的值
  },
  actions: {
    getTodo: context => Vue.http.get('/me/gettodo', (res) => {
      context.commit('revsiseTode', res.body.todo)
    })
  }
})

Then you can submit mutations triggered by our actions to modify the state of the data, modify me.vue

// ...
// 在单独构建的版本中辅助函数为 Vuex.mapGetters
import { mapGetters } from 'vuex'
// 在单独构建的版本中辅助函数为 Vuex.mapMutations
import { mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      // 映射 this.todo 为 store.state.todo
      'todo'
    ])
  },
  method: {
    ...mapActions(
      [
        'reviseTodo', // 将 `this.reviseTodo()` 映射为 `this.$store.dispatch('reviseTodo')
      ]
    )
  }
}
// ...

vuex directory structure

Above the main simply talked about the use of vuex, it is only part of the talk, but I believe go to the official website will have a better understanding after reading here. Of course, these are simple to use, if you want to vuex applied to the project, they must be more attractive modular, vuex official website also provides us with a standard project directory structure , not to me a few long-winded.

to sum up

vuex is not difficult, I also thought that the beginning has been very difficult not learn, as long as we use will find, in fact, also have a good package but others approach us to use this simple warehouse on the line.

Vue learning diary (four) - Vue state management vuex