Shulou(Shulou.com)06/03 Report--

This article mainly explains the "vuex installation and new project steps", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vuex installation and new project steps" bar!

Zero step

Create a new vue project and install vuex. Do not introduce too much here. If you can click in, by default you have these skills ^ _ ^

The first step

Create a new .js file with an arbitrary name. According to the convention, it is recommended to go to the / src/store directory (if not, create one yourself)

File location / src/store/index.js

/ / the introduction of vue and vueximport Vue from 'vue'import Vuex from' vuex'// requires use, fixed writing, and remember to Vue.use (Vuex) / / directly export an instance of Store export default new Vuex.Store ({/ / vue-like data state: {name: 'oldName'}, / / similar to mothods (synchronization method) mutations in vue: {updateName (state) {state.name =' newName'}))

The code looks a little bit more, but does it look familiar? It's not much different from an ordinary vue.

This step is actually to create a new store, but we haven't used it in the project yet.

Step two

Introduce the above file into the entry file and slightly change the parameters passed to new Vue (). There is a note after the new line.

File location / src/main.js (vue-cli automatically generated entry, if you can not use scaffolding, then there is no need for me to explain)

Import Vue from 'vue'import App from'. / App'import vuexStore from'. / store' / / add new Vue ({el:'# app', store:vuexStore / / add components: {App}, template:''})

Tip: the address after import store from'. / store' is the location of the file we created above (/ src/store/index.js)

Since I am index.js here, I can omit it.

Step three

The above two steps have actually completed the basic configuration of vuex. The next step is to use the

File location / src/main.js (also the app.vue generated by vue-cli, here I'll remove the extra code for demonstration purposes)

{{getName}} rename import HelloWorld from'. / components/HelloWorld'export default {computed: {getName () {return this.$store.state.name}}, methods: {changeName () {this.$store.commit ('updateName')}

This is a very common vue file. The difference is that we need to use the computed attribute to get the "data" in the store.

And if we want to change the data, we no longer use this.xxx = xxx to change it to this.$store.commit ('updateName').

Thank you for your reading, the above is the "vuex installation and new project steps" content, after the study of this article, I believe you have a deeper understanding of the vuex installation and new project steps, the specific use of the need for you to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.