vuex的介绍

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。

也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

vuex中，有默认的五种基本的对象：

state：存储状态（变量）

actions：异步操作。在组件中使用是this.$store.dispath(’’)

mutations：修改状态，并且是同步的。在组件中使用this.$store.commit(’’,params)。这个和我们组件中的自定义事件类似。

getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()

modules：store的子模块，为了开发大型项目，方便状态管理而使用的。一般在总的管理中使用

1、首先创建一个vue-cli项目

执行下面的命令，创建一个project项目（这里也可以使用其他非webpack模板)

vue init webpack app 这是cli2版本的 ，也可以使用vue create project创建的什cli3版本

项目创建后，然后安装vuex，使用命令：npm install vuex --save（安装vuex保存到本地）

然后我们在项目的src目录下新建一个目录store，在store里面创建一个index.js，它相当于总务，管理着所有的数据，modules这个对象会应用在这里，来引入其他的子数据。

下面是我写的一个demo

基础使用:
一创建store,
二创建数据包
三导出数据包
四store内引入数据包,管理各个数据包
五在入口文件全局注入数据包

import Vue from 'vue'
import Vuex from 'vuex'

vue.use( Vuex )

const store = new Vuex.Store({//在这里要注意Store的大写问题
state :{
    count:1
   }
})

export default store //导出store

在上面 我们创建了一个vuex实例，，我们在index.js这个文件中引入了vue 和vuex ，创建了Vuex.Store实例保存到变量store中，最后使用export default导出store

然后我们就可以开始编写我们xuex业务代码了，那么我们的数据如何保存呢？

State:Vuex的数据源 ，我们需要保存的数据就保存在这里，可以在页面通过this.$store.state来获取我们定义的数据。

Vuex通常在大型项目中使用，所以我们在index.js中是对数据的总的管理，数据的定义会分别存放在storex下面的不同的文件夹内。
在index.js中，应用modules这个对象进行总的引入

/* 
  这里打造的就是vuex的仓库:   store
*/

import Vue from 'vue'

import Vuex from 'vuex'

import count from './count'
这里的count指的就是我们打造的一个小的计数demo,存放在store下面的count文件夹下的index.js文件

Vue.use( Vuex )


// const store = new Vuex.Store( options )
const store = new Vuex.Store({
  modules: {
    count //
  }
})

export default store

在count文件下的index.js中

// import {INCREMENT} from './type'

import * as type from './type'

//type是我在count文件夹下创建的一个用来定义常量的文件，常量的定义我们通常会大写，用来明显的区分常量和变量的区别。

const count = {
    state: {
        num: 0,
    }, //state就相当于data
    actions: {
        // increment({
        //     commit
        // }) { //这里的b也就是在传递过来的参数
            // console.log('a',commit);
            // console.log('b',b)//b指的是从组件传来的参数，我们给b起了个名字叫‘负载’，在这里payload，就是b,
            //console.log('increment' )//actions的作用是创建动作，发出动作。
        //     const action = {
        //         type: type.INCREMENT, //动作的类型，比如类型 increment, decrement 类型我们一般用大写表示，用常量表示 ，我们通常在当前文件夹下面创建一个type.js存放这个常量。
        //     }
        //     commit(action)
        // }
    }, //actions 为用户的一个动作也是一个对象,在这里放的是时间处理程序,即方法
    mutations: { //mutations的作用就是修改数据
        //mutations 里面的方法的名称就是actions里面传递过来的方法名称，也就是type类型里面传递多来的参数。

        [type.INCREMENT](state, action) { //在这里。函数名称可以自定义，为了语义化，我们将函数名与actions里面的函数名保持一致
            // console.log('state',state);//在这里第一个参数，state是我们的数据
           // console.log('action', action); //第二个参数 actions，指的是负载payload :b
  <div>
    <button @click = 'add'>+</button>
    <p>前不标准后非标准   数据：{{this.$store.state.count.num}}</p>
  </div>
</template>
<script>
export default {
  mounted(){
    //console.log(this.$store.state.count.num);
  },
  methods:{
    add () {

     this.$store.commit('increment',100)//跳过actions,直接将INCREMENT传递过去，即mutations里面的方法名字
     // this.$store.dispatch( 'increment' );
     // console.log(this.$store)
      //this.$store.dispatch( 'increment',100 )，在这里我们可以这样子传递一个100的参数过去。
    }
  }
}
</script>


            state.num++;
        }
    }, //用来修改数据的
    getters: {
        // newState(state) { //通过这一步的传输，我们可以在this.$store里面看到getters里面有newstate,在没有写这一步之前是没有newstate这个选项的
        //     return state.num //在这里我们虽然newState写的是一个方法，但是当我们在getters里面直接表示的是一个数值
        // }
    },
}

//这个count最终需要由count 管理,我们需要导出

export default count;

然后我们只需要在main.js这个入口文件中引入

复制代码
import Vue from 'vue'
import App from './App.vue'

import store from './store/index.js' //全局使用数据,所以我们需要像vue-router一样全局注入,

Vue.config.productionTip = false


//然后注册,这样数据能全局获取

new Vue({
  store,//像vue-route一样注册
  render: h => h(App)
}).$mount('#app')

//这里是入口文件

接下来我们在components下面创建一个Count.vue文件，components下面一般用来存放公用组件。

<template>
  <div>
    <button @click = 'add'>+</button>
    <p>前不标准后非标准   数据：{{this.$store.state.count.num}}</p>
	<p>前标准后标准：   {{}}</p>
  </div>
</template>
<script>
export default {
  mounted(){
    //console.log(this.$store.state.count.num);
  },
  methods:{
    add () {

     this.$store.commit('increment',100)//跳过actions,直接将INCREMENT传递过去，即mutations里面的方法名字
     // this.$store.dispatch( 'increment' );
     // console.log(this.$store)
      //this.$store.dispatch( 'increment',100 )，在这里我们可以这样子传递一个100的参数过去。
    }
  }
}
</script>

当我们在app.vue里面使用count这个count组件时。

<template>
  <div id="app">
        <Count></Count>
  </div>
</template>

<script>
import Count from './components/Count'

export default {
  name: 'app',
  components: {
    Count,

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

vuex一共有四种模式，
前标准后标准 ：
前标准后不标准：
前不标准后标准：
前不标准后不标准：

前标准与不标准的区别在于：是否通过actions这个对象来进行定义动作并传递动作。。
后标准于非标准的区别在于是否通过getters进行数据的修改。

上面的代码，我把集中形式都糅合在一起。

我的分享结束啦，如果对您有了一定的帮助，就给我一个赞?吧 ?