vue----webpack模板----vuex使用流程

1.使用流程

 

1，安装vuex插件  每个项目都要进行安装
    cnpm install vuex --save-dev
 
2.创建仓库  
    在src中创建文件夹store, 创建文件index.js    即store/index.js

    在store/index.js中进行配置

//使用插件的步骤
//导入vue
import Vue from "vue";
//导入vuex
import Vuex from "vuex";
//将vuex挂载到vue身上
Vue.use(Vuex);
 
//公共状态
const state = {
   arr : [],
   inputVal:""
}
 
//修改公共状态
const mutations = {
    handleAddArr(state,params){
        state.arr.push(params);
        state.inputVal = "";
      
    },
    handleDel(state,params){
        state.arr.splice(params,1);
    },
    handleChange(state,params){
        state.inputVal = params;
        console.log(state.inputVal);
    }
 
}
 //做业务逻辑及异步数据的加载
const actions = {
    handleAdd:function({commit},val){
        commit("handleAddArr",val);
        
    },
    handleDel:function({commit},val){
        commit("handleDel",val)
    },
    handleChange:function({commit},val){
        commit("handleChange",val)
    }
 
}
 
//通过Vuex创建仓库
        const store= new Vuex.Store({
                state,
                mutations,
                actions，
                getters,
                modules:{}
        })
//导出仓库
        export default store

main.js中的配置

import Vue from 'vue'
import App from './App'
import router from './router'
 
//引入store,因为当前文件夹下是index.js,所以直接引入文件夹
import store from "./store";


Vue.config.productionTip = false
 
new Vue({
  el: '#app',
  router,
  store,//将store挂载到vue实例上
  components: { App },
  template: '<App/>'
})