Vuex 的应用

要想使用vuex 第一步要先安装vuex

命令行 ： npm i vuex -S 

安装后 在 src  目录下创建一个store 用来更改数据，在文件夹下面创建两个文件一个是index.js 文件 ，用来导出。

另一个是state 用来定义和管理数据

index用来导出数据，state用来定义数据

在index.js 中引入Vue 和 Vuex

同时引入本地的state

引入Vue  用Vue.use(Vuex) 来调用他

创建好store后 需要在main.js 中引入store 并将store写入vue实例中

在main.js 中引入store 

然后可以直接在自己的要显示的 界面中用到store里的state 我在这里用Home.vue

当我们在computed 中写count 方法的时候 this.$store.state.count 的值就是我们在state中定义的count  

要想读取到this count 不可以写成箭头函数 必须写成 count () { }

在vuex 中自带的mapState 可以直接返回数据。 用 ...mapState(['count'])

此时需要在用到的页面从vuex中引入mapState

读取到state中的 数据

在数据修改的时候有多种方式，函数可以直接写在Home.js 中 还可以写在store中

 在vuex 有一个 mutations 

在vuex严格模式下唯一可以修改state值的地方

用来写方法。 将从state读出的数据直接在mutations中来进行修改并且返回。 

在store 的 index.js 文件中写的mutation

要调用的时候可以在 Home.vue 的methods 中添加一个add () {}方法  用

this.$store.commit('inc') 来绑定  这是手动绑定 在react 中可以自动绑定。但是vue 不可以 自动绑定

这句话也可以改成 

...mapMutation['inc'] 里面是字符串

这是引用的两种方式

当在组件中 onclick中调用的时候 可以用 @click.native = "inc()" 

后面可以写括号，并且可以传递参数，会传递给mutations 方法的 第二参数

mutations 中的方法最多有两个参数 

第一个就是state 

第二个就是传递进来的参数。如果要传递多个参数 应该使用对象的方式传递。

多写的参数不识别