标签：route 监听 属性 并且 ble http use 可靠 isp
首先安装vuex
npm install vuex --save
等显示安装成功后，在src文件夹里面新建store文件夹，并且在store文件夹里新建index.js。index.js代码如下:
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const state = { number:1, message:‘我在测试state‘ } const store = new Vuex.Store({ state }) export default store
然后，我们到main.js文件引入store,代码如下：
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ import store from ‘./store‘ Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: ‘#app‘, router, store, components: { App }, template: ‘<App/>‘ })
至此，vuex就可以正常使用了。
接下来就详细说说用法：
回到store文件夹里的index.js，先声明一个state变量，在这个变量里面，我就随便定义两个属性值，再把它扔到已经实例化的Vuex.store里面，代码如下：
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const state = { number:1, message:‘我在测试state‘ } const store = new Vuex.Store({ state }) export default store
至此，我们就可以在任何组件里拿到这两个属性值了。不妨试试吧！代码如下：
<template>
<div class=‘testVuex‘>
{{this.$store.state.number}}<br>
{{this.$store.state.message}}
</div>
</template>
代码运行，演示结果如下图：
但这并不是最好的方式，为此官方提供了一个更为可靠的方式，通过getters来实时监听state的数据变化。在这里解释下getters，据官方文档所述，getters相当于store的计算属性，它的返回值会根据依赖缓存起来。代码如下：
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const state = { number:1, message:‘我在测试state‘ } const getters = { showNumer(state){ return state.number }, showMessage(state){ return state.message } } const store = new Vuex.Store({ state }) export default store
这个时候需要引入一个新名词mutations来真正的改变一下state数据，代码如下：
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const state = { number:1, message:‘我在测试state‘ } const getters = { showNumer(state){ return state.number }, showMessage(state){ return state.message } } const mutations = { changeNumber(state,sum){ state.number += sum }, changeMessage(state){ state.message = ‘我是改变后的message‘ } } const store = new Vuex.Store({ state, getters, mutations }) export default store
紧接着我们就去任一组件里通过this.$store.commit(‘changeNumber‘,6)以及this.$store.commit(‘changeMessage‘)改变下state值，看看有没有相应改变,代码如下：
<template>
<div class=‘testVuex‘>
{{this.$store.state.number}}<br>
{{this.$store.state.message}}
<button @click="change()">点击改变state的number</button>
<button @click="change2()">点击改变state的message</button>
</div>
</template>
<script>
export default {
methods:{
change(){
this.$store.commit(‘changeNumber‘,6)
},
change2(){
this.$store.commit(‘changeMessage‘)
}
}
}
</script>
代码运行，点击按钮，演示结果如下：
但这不是理想的改变值的方式；因为在 Vuex 中，mutations里面的方法 都是同步事务，意思就是说：比如这里的一个this.$store.commit(‘changeNumber‘,sum)方法,两个组件里用执行得到的值，每次都是一样的，这样肯定不是理想的需求。
这个时候又要引入一个新名词actions来实现异步操作了。actions中回调函数的第一个参数是context,是一个与store实例具有相同属性和方法的对象。具体代码如下：
import Vue from ‘vue‘; import Vuex from ‘vuex‘; Vue.use(Vuex); const state = { number:1, message:‘我在测试state‘ } const getters = { showNumer(state){ return state.number*2 }, showMessage(state){ return state.message } } const mutations = { changeNumber(state,sum){ state.number += sum }, changeMessage(state){ state.message = ‘我是改变后的message‘ } } const actions = { changeNumber(context,sum){ context.commit(‘changeNumber‘,sum) }, } const store = new Vuex.Store({ state, getters, mutations, actions }) export default store
任一组件使用代码如下：
<template>
<div class=‘testVuex‘>
{{this.$store.state.number}} <button @click="change()">点击改变state的number</button><br>
{{this.$store.state.message}} <button @click="change2()">点击改变state的message</button><br>
<button @click="changeSyncNumber">点击改变</button>
</div>
</template>
<script>
export default {
methods:{
change(){
this.$store.commit(‘changeNumber‘,6)
},
change2(){
this.$store.commit(‘changeMessage‘)
},
changeSyncNumber(){
this.$store.dispatch(‘changeNumber‘,8)
}
}
}
</script>
点击改变后运行结果由1变成了9。
标签：route 监听 属性 并且 ble http use 可靠 isp
原文地址：https://www.cnblogs.com/YMoonwind/p/11196128.html
