vuex的使用

一.vuex(数据仓库,数据中专站,用于无关系多组件间通信)

vuex的安装:首先cd到项目目录文件夹下,npm install vuex

1. vuex使用:在main.js文件中先导入vuex: import vuex from ‘vuex’  使用npm安装的导入

  时不需要路径即可直接导入,且可自命名.

2. 用vue使用vuex,然后实例化vuex对象; 留心vue导入时有无重命名,

       vue.use(vuex)

let store=new vuex.Store({  # S必须大写

  state:{name:’alex’}   # state固定语法,用来存储数据

});

3. 别忘了在vue根目录中注册store, store:store简写为store,

4.以上为不解耦时的数据结构,解耦可专门新建个js文件,把需要的vue和vuex导入,把2中代码

  全复制走,只需在其内把实列化后的对象抛出即可.通常在srcw文件夹内新建js来解耦;把store

   解耦走了,vue根目录需要注册它,所以别忘了再把解耦的再导入进来.

5. vuex的固定字段有:

  export default new vuex.Store({
  state:{name:'alex'},
  getters:{             # 用来过滤数据,对数据进行修饰
    new_name:function (state) {
      return state.name + 'good'
    }
  },
  mutations:{     # 用来接收this.$store.commit提交来的修改数据请求
    change_data:function (state,data) {
      return state.name=data
    }
  }
});

前端获取和发送修改数据请求代码:  div内{{name}}取值可从data也可从computed中

export default {
  name: "course",
  data(){
    return{
      // name:this.$store.state.name,  #data中取的值不会随仓库中值的改变而改变
      new_name:this.$store.getters.new_name,
    }   # $store在vue根实例化时已注册进vue中,所以可以vue对象调用到它
    },
  methods:{
    change:function () {
      this.$store.commit('change_data','egeon')  # 给vuex内提交修改请求
    }    # 接上,commit后参数一为事件名称,后端就是接收的这个事件,二为新值
  },
  computed:{
    name:function () {  # 计算属性这里name会时时获取仓库中的改变值
      return this.$store.state.name  # 从vuex内获取数据,name为存值的那个变量
    },
  },
}