Vuex状态管理

此文章大部分基于使用webpack脚手架

一、Vuex的安装

在编辑器里的脚手架根目录上打开终端，或者用cmd直接cd到根目录，输入npm install vuex –save 进行下载

二、Vuex的创建

   1、在src目录下新建store文件夹，在文件夹中新建index.js文件
   （名字起做index在引入路径时可以少写一步）

以下为在index.js中定义的内容：

2、在main.js中的vue根实例上注册store（要记得先把之前写的store的js文件先引进来）

import store from './store'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,store,
  components: { App },
  template: '<App/>'
})

3、在需要使用数据的组件模板中完成调用，需要使用到根实例也就是this.$store,上的数据或getter方法，以下面的方法使用

  <!-- 调用store中的msg数据 -->
      <span>{{this.$store.state.msg}}</span>
      <!-- 调用store  getter中的changemsg方法 -->
      <h3>{{this.$store.getters.changemsg}}</h3>

三、vuex 根实例上的属性（配置项）名称都不可更改

state 在这个区域定义数据

   state:{
       msg:'我是store数据1',
       num:100,
   } ,

getters 在这里定义属性，可以获取到store的数据，也可以在这里对store里的数据进行操作，不更改原数据，他的使用方式类似计算属性，当作一个属性去调用

 getters:{
       changemsg:function(state){
           return '改变后的----'+state.msg
       }
   },

getters 调用方式

      <!-- 调用store  getter中的changemsg方法 -->
      <h3>{{this.$store.getters.changemsg}}</h3>

muations 在这里定义方法，这里的方法可以改变原数据

   mutations:{
       wubai(state){
       return state.num=500 },
    sanbai(state){
       return state.num=300
    }
   }

使用方式
①在需要使用数据的组件模板上定义触发事件

      <button @click="wubai">更改数值为500</button>
      <button @click="sanbai">更改数值为300</button>

②.再在当前组件的逻辑里定义方法，在这个方法里使用this.$store.commit的方法给他传递一个参数（自定义名称）

  methods:{
      fn(){
          this.$emit('change',this.son)
      },
      wubai(){
          this.$store.commit('wubai')
      },
      sanbai(){
          this.$store.commit('sanbai')
      }
  }

③以传递过来的参数为准，在mutations里面以此参数定义一个函数方法，这里的return可以是以下类似方式，也可以是一个函数（当需要在触发事件，传递参数时，return的可以是一个函数，以当前示例为例，传递方式是在click绑定的事件后加一个括号，括号传参）

   mutations:{
       wubai(state){
       return state.num=500 },
    sanbai(state){
       return state.num=300
    }
   }