vuex的使用

一、需要在组件中引入vuex的相关文件后才能在该组件中使用状态值、修改状态值

　　1、使用：$ vue init webpack vuextest  //创建vuextest项目

　　2、切换进vuextest ： $ cd  vuextest

　　3、使用： $ npm run dev运行vuextest

　　4、安装vuex：$ cnpm i vuex -S

　　5、新建vuex文件：/vuextest/src/vuex/store.js，在store.js中编辑如下代码：

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)

let store = new Vuex.Store({
   // 定义状态
   state: {
        count: 1
    }, 
   //修改状态
   mutations: {
        setCount(state, newCount) {
            state.cout = newCount;
        }
    }   
})

// 导出
export default store

　　6、在组件中使用状态值，新建组件，/vuetest/src/components/count.vue，代码如下：

<template>
    <div>{{ $store.state.count }}</div>
　　<div><button @click="$store.commit('setCount',20)">修改数值</button></div>
</template>

<script>
    // 引入vuex文件，如果不引用直接使用的话将会报错
    import store from '@/vuex/store'
    export default {
        store  //别忘了这一步
    }    
</script>

　　

二、直接在入口文件main.js中引入vuex文件，这样组件中再使用状态值的话就不用单独引入vuex文件了

　　1、在入口文件/vuextest/src/main.js中引入vuex文件

import Vue from 'vue'
import App from './App'
import router from './router'
//引入vuex文件
import store from './vuex/store'  

Vue.config.productionTip = false

/* eslint-disable  no-new */
new Vue({
   el: '#app',
   router,
   store,
   components: { App },
   template: '<App/>'     
})

　　

三、如何修改入口文件

　　在/vuetest/build/webpack.base.conf.js中修改entry