Vuex的初步研究和实践总结

1.背景

最近在做一个单页管理后台项目，为了提高开发效率，我使用了Vue框架进行开发。为了使各部分的功能和独立结构更加清晰，很多组件被拆分，但组件之间的数据共享成为问题。父子组件实现起来相对简单，prop，$emit，$on可以处理它。此外，还有很多兄弟组件和多级组件，实现起来比较繁琐，不利于多人协同开发中的统一管理。于是，Vue生态之一的Vux实践之旅开始了。

2.概观

每个Vuex应用的核心都是商店。“store”基本上是一个容器，它包含应用程序中的大部分状态。

Vuex和纯全局对象有两个区别：

1.1的状态存储。Vuex反应灵敏。当Vue组件从商店读取状态时，如果商店中的状态发生变化，相应的组件将相应地得到高效更新；2.您不能直接更改商店中的状态。改变存储中状态的唯一方法是显式提交)突变。这使得我们很容易跟踪每个状态的变化，这样我们就可以实现一些工具来帮助我们更好地理解我们的应用程序

3.安装和使用

3.1.使用Vue-cli开发和安装Vue包

Cnpm安装vuex - save3.2 .在src目录下创建store文件夹，并如下创建index . js(src/store/index . js)

从‘Vue’导入Vue从‘Vuex’导入Vuex . use(Vuex)；导出默认的新Vuex。Store({ state: { }，getters: { }，mutations: { }，actions 3360 { })；然后在src文件下的main.js中使用它

从“vue”导入vue，从“导入应用程序”。/app“从导入商店”。/store ' vue . config . production tip=false new vue({ El : ' # app '，store，components: { app }，template3360' app/'}) 4。使用

4.1 .状态

状态用于保存共享数据，现在store/index.js更改如下：

State: {count:0}，在组件目录中创建Index.vue，如所示：

template div class=' index ' { count } }/div/template script导出默认{ name: 'index '，computed : { count(){ return this。$ store . state . count；} } }/脚本结果如下：

我们可以通过组件的计算属性来保存状态中的值，那么问题来了。如果存储太多，我们组件中的计算属性不就是这样的吗：

computed:{ count(){返回此。$ store . state . count；}，stateA(){返回这个。$ store . state . statea；}，stateB(){返回这个。$ store . state . stateb；}}用这种方式获取共享状态的数据没有错，但是好像还是有很多多余的代码。我们可以使用mapState辅助功能来帮助我们生成计算属性，这样就可以少按一些键：

当映射的计算属性的名称与状态的子节点名称相同时，我们也可以将字符串数组传递给映射状态。

从“Vuex”导入{map state}，导出默认{ name : ' index计算值：map state (['count'])，}}总结：使用vuex并不意味着需要把所有的状态都放入Vuex。虽然将所有状态放入Vuex会使状态变化更加明确和易于调试，但也会使代码变得繁琐和不直观。如果某些状态严格属于单个组件，最好将其用作组件的本地状态。

4.2.getter

有时我们需要在使用共享状态的属性之前对其进行一些处理。我们可以获取数据，然后在组件的计算属性中进行处理，例如，如下所示：

//store/Index . jsstate : { count :0，numbers:[0，1，2，3，4，5，6，7，8] }，//Index组件模板div class=' Index ' { count } } br { { numbers }。join ()}}/div/template脚本从“vuex”导入{map state}，导出默认{ name : ' index ,{ computed : }.mapState(['count'])，numbers(){返回这个。$ store . state . numbers . filter((item)={ return item 3；})} }/脚本结果如下：

那么问题来了。如果多个组件要做同样的处理，我们就需要把一个代码复制到多个地方，这显然是不合理的。所以用getter，可以理解为组件中的计算属性。例子如下：

/store/index . jsgetter s 3360 { filter numbers(state){ return state . numbers . filter((item)={ return item 3；}) } }，//Index组件模板div class=' Index“{ count } } br { { filter numbers }。join ()}}/div/template脚本从“vuex”导入{mapstate}导出默认{ name : ' index ,{ computed : }.mapState(['count'])，filterNumbers(){返回这个。$ store . getter s . filter numbers；} } }/脚本结果完全相同。我们可以根据这个得到吸气剂。$ store.getters属性名，或者我们可以通过mapgetter辅助函数将store中的mapgetter映射到本地计算属性：

具体实现如下：

template div class=' index ' { { count } } br { { filternumbers . join()} } br { { anthernumbers . join()}/div/template script从' vuex '导出默认{ name: ' index，computed: {.mapState(['count'])，6.mapgetter([' filterNumbers '])，mapgetter({ anthrenumbers : ' filter numbers ' })} }/script如果直接使用与参数相同的名称，如果要更改名称，可以传入一个对象作为参数，结果如下：

4.3 .突变

在组件中，只能读取存储中的数据，但不能手动更改。更改存储中数据的唯一方法是提交显示的更改。Vuex中的突变与事件非常相似：每个突变都有一个字符串的事件类型和一个回调函数。这个回调函数是我们实际改变状态的地方，它会接受状态作为第一个参数。按如下方式更改代码：

//store/index . jsmutations : { add(state){ state . count；}}，//Index组件* * button @ click=' add '/button * * methods : { add(){ this。$ store . submit(' add ')；console . log(this . count)；} * *

连续点击五次添加按钮，发现count的值也发生了变化。当然，我们也可以传进去

//store/index . jsmutations : { add(state，n){ state . count=n；}}，//Index组件* * button @ click=' add '/button * * methods : { add(){ this。$ store.submit ('add '，10)；console . log(this . count)；} * *触发方法语句为：this。$商店。提交(方法名称)；您也可以使用辅助功能“映射突变”来代替：

methods:{.map突变(['add'])，}4.4.action

前面我们说过，变异有一个限制，就是必须同步执行。在业务需求中，我们有时需要在操作之前获取ajax请求数据或者定时器操作数据。这些是异步请求，应该通过操作来实现。具体实现如下：

//store/index . jsmutations : { changeCount(state){ state . count=3000；}，}，actions : { changeCount 3000s(context){ setTimeout(()={ context.commit(' changeCount ')}，3000)//Index component button @ click=' changeCount 3000s '单击按钮3s/buttonmethods :后，计数的值会发生变化。}.映射变体(['add'])，changecount3000s () {this。$ store . dispatch(' changecount 3000s ')；}}我们点击3s按钮后，计数值变为3000。我们可以通过这个触发事件。$store.dispatch(方法名)，或通过辅助函数mapActions。

从' vuex' methods:{导入{mapState，mapGetters，mapGetters，mapActions}.映射突变(['add'])，map actions([' changecount 3000s '])}通过学习如何使用上述属性，基本可以满足日常业务需求，但使用Vuex会有一定的门槛和复杂度。它的主要使用场景是大规模的单页应用。如果你的项目不是很复杂，可以用总线共享数据，但在数据管理和维护上只是一个简单的组件，而Vuex可以。

参考文献：

《Vue.js实践》 Vuex

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。