vuex in this. $ store.commit

Vue project, if the project is simple, data transfer between the components may be used Sons props or other ways to transfer $ EMIT

However, if medium-sized items, often need to pass data between the parallel components are not relevant, and many require multiple data components recycled. This time to use the above method to make the project code becomes tedious, and not conducive to the reuse of components and increasing the degree of coupling.

Vue state management tools Vuex perfect solution to this problem.

Looked under vuex official website, that is not well understood, sometimes we just need to get a dynamic data (official website called "component-level": is an independent control, scope only within the assembly) from one component and then want to be placed in a official website called "application-level" (can be acquired at any time and anywhere in the dynamic modification of the project, after modification, vue will do is update your entire project) place. This is the reason I first learn vue, I do not want to be a front-end data structures library. . .

Let's look at my small example step by step

First install vuex company projects I have been migrated from vue1.0 to vue2.0, download and install vue

npm install vuex --save

Then index.html sibling new folder store, file folders New index.js files in this document we used to assemble the module and export store

[First, access to the data store]

. 1 Import from Vue 'VUE'
 2 Import from Vuex 'vuex'
 . 3   
. 4  // tell vue "use" vuex 
. 5  Vue.use (Vuex)
 . 6   
. 7  // Create an object to hold the initial state when the application starts 
8  // required maintained state 
. 9 const = Store new new Vuex.Store ({
 10    state: {
 . 11      // place the initial state of the global value of the initial startup time of app 
12 is      bankInf: { "name": "I am the first data vuex" , "id": 100, " bankName": " Bank of China"}
 13    }
 14  })
 15  // integration initial state and the change function, we get our desired store 
16  // At this point, the store can be connected to our application
17 export default store

My project file structure:

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 import store from './../store/index'
 5  
 6 /* eslint-disable no-new */
 7 new Vue({
 8   el: '#app',
 9   router,
10   store,
11   template: '<App/>',
12   components: { App }
13 })

这样简单的第一步就完成了，你可以再任意组件中使用store中的数据，使用方法也很简单，就是使用计算属性返回store中的数据到一个新属性上，然后在你模板中则可以使用这个属性值了：

任意组件中：

1 export default {
2   ...
3   computed: {
4     bankName() {
5       return this.$store.state.bankInf.bankName;
6     }
7   },
8   ...
9 }

在模板中可以直接使用bankName这个属性了，也就是store中的中国银行

【二、在组件中修改store中的状态】

在任意组件中添加html模板

1 <div class="bank">
2     <list-header :headerData="bankName"></list-header>
3     04银行详情页面
4     <input  name="" v-model="textValue">
5     <button type="button" name="获取数据" @click="newBankName"></button>
6 </div>

然后组件中提交mutation

 1 export default {
 2   ...
 3   computed: {
 4     bankName() {
 5       return this.$store.state.bankInf.bankName;
 6     }
 7   },
 8   methods: {
 9     newBankName: function() {
10       this.$store.commit('newBankName', this.textValue)
11     }
12   }
13  ...   
14 }



在store中的index.js中添加mutations：

 1 const store = new Vuex.Store({
 2   state: {
 3     // 放置初始状态 app启动的时候的全局的初始值
 4     bankInf: {"name":"我是vuex的第一个数据","id":100,"bankName":"中国银行"},
 5     count:0
 6   },
 7   mutations: {
 8     newBankName(state,msg) {
 9       state.bankInf.bankName = msg;
10     }
11   }
12 })

这样你发现，在点击提交按钮的时候，页面已经显示你修改的数据了，并且所有复用这个组件的地方的数据全都被vue更新了；

如果在使用中发现报错this.$store.commit is not a function ，请打开你项目的配置文件package.json，查看你正在使用的vuex的版本，我正在使用的是vuex2.0,

如果想删除旧版本的vuex并安装新版本的vuex请使用

npm rm vuex --save

然后安装最新的vuex

npm install vuex --save

即可解决这个错误，或者是查看vuex官网api修改提交mutation的语句

原文地址： https://blog.csdn.net/jingtian678/article/details/81481075

vuex in this. $ store.commit

Guess you like