vuex导入_vuex 引用方法

引入Vuex(前提是已经用Vue脚手架工具构建好项目)

1、利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

要注意的是这里一定要加上 –save，因为你这个包我们在生产环境中是要使用的。

2、新建一个store文件夹(这个不是必须的)，并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

import Vue from 'vue';

import Vuex from 'vuex';

3、使用我们vuex，引入之后用Vue.use进行引用。

Vue.use(Vuex);

通过这三步的操作，vuex就算引用成功了，接下来我们就可以尽情的玩耍了。

4、在main.js 中引入新建的vuex文件

import storeConfig from './vuex/store'

5、再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({

el:'#app',

router,

store,//使用store

template: '',

components: { App }

})

初出茅庐 来个Demo

1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件。

const state ={

count:1

}

2、用export default 封装代码，让外部可以引用。

export default new Vuex.Store({

state

});

3、新建一个vue的模板，位置在components文件夹下，名字叫count.vue。在模板中我们引入我们刚建的store.js文件，并在模板中用{ {$store.state.count}}输出count 的值。

{ {msg}}

---

{ {$store.state.count}}

export default{

data(){

return{

msg:'Hello Vuex',

}

},

store

}

4、在store.js文件中加入两个改变state的方法。

const mutations={

add(state){